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本 


内 容 简 介 
全面 系统 地 介绍 了 网 页 设计 与 网 站 建设 的 方法 和 技巧 ， 通 过 大 量 实例 ， 让 读者 逐步 掌握 网 站 建设 


软件 的 使 用 方法 ,真正 完成 从 入 门 到 精通 的 转变 。 全 书 穿插 大 量 的 操作 技巧 与 学 习 心 得 ， 让 读者 迅速 成 为 网 
页 设计 的 高 手 。 


本 


忆 共 21 章 ， 以 网 站 建设 入 门 、Dreamweaver 静态 网 页 的 制作 、 动 态 网 站 与 HTML5、Photoshop 设计 


美观 的 网 页 图 像 、Flash 设计 网 站 动画 、 网 站 的 策划 与 发 布 推广 、 商 业 网 站 建设 实战 为 线索 具体 展开 ， 循 序 
渐进 地 讲述 了 网 页 设计 与 网 站 建设 方方面面 的 知识 。 
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节 知 识 全 面 实 用 、 浅 显 易 懂 ， 让 读者 轻松 实现 自己 拥有 网 站 的 梦想 。 本 书 可 作为 大 专 院 校 、 高 职高 


专 、 中 等 职业 学 校 计算 机 专业 的 教材 , 各 种 计算 机 培训 班 的 教材 ， 也 可 以 作为 想 学 习 网 页 制作 与 网 站 建设 的 
自学 者 的 参考 手册 。 
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随 着 网 络 信息 技术 的 广泛 应 用 ， 互 联网 作为 重要 的 媒体 使 全 球 信息 共享 成 为 现实 ， 它 正 逐 渐 
改变 着 人 们 的 生活 和 工作 方式 。 面 对 扑面 而 来 的 网 络 浪潮 ， 个 人 、 企 业 等 纷纷 建立 自己 的 网 站 ， 
利用 网 站 来 宣传 自己 、 提 高 知名 度 、 寻 找 新 的 商机 。 同 时 ， 网 站 建设 行业 也 迎 来 了 更 大 的 机 遇 ， 
需要 大 量 的 设计 人 才 。 

网 站 建设 涉及 的 知识 非常 多 ， 要 在 短 时 间 内 完全 掌握 几乎 是 不 可 能 的 。 但 是 ， 作 为 一 个 合格 的 
网 站 建设 人 员 ， 必 须 对 这 些 要 涉及 的 知识 有 所 了 解 ， 掌 握 其 中 的 重要 部 分 ， 例 如 Dreamweaver、 
Photoshop、Flash、HTML、CSS 样式 表 等 ， 并 且 至 少 掌握 一 种 程序 设计 语言 和 数据 库 管理 系统 。 这 
些 都 是 网 站 开发 人 员 的 基本 功 。 本 书 除了 讲述 上 述 内 容 外 ， 所 有 案例 也 非常 贴近 实际 的 网 站 开发 。 


本 书 主要 内 容 


本 书 全 面 系统 地 介绍 了 网 页 设计 与 网 站 建设 的 方法 和 技巧 ， 通 过 大 量 实例 ， 让 读者 逐步 掌握 
网 站 建设 软件 的 使 用 方法 ， 真 正 完成 从 入 门 到 精通 的 转变 。 全 书 分 为 21 章 ， 主 要 内 容 介绍 如 下 。 

@ 第 1 章 -~ 第 2 章 介绍 网 站 建设 基础 知识 ， 包 括 网 页 的 基本 概念 、 网 页 设计 与 网 站 建设 需要 
的 常用 技术 、 常 见 网 站 的 类 型 与 特点 、 网 页 的 色彩 搭配 。 

@ 第 3 章 ~ 第 17 章 依次 介绍 Dreamweaver 静态 网 页 制作 、 动 态 网 站 与 HTML5、Photoshop 
设计 网 页 图 片 、Flash 制作 网 页 动画 。 

@ 第 18 章 ~ 第 20 章 介绍 网 站 的 策划 与 发 布 推广 ， 包 括 网 站 的 整体 策划 、 网 站 的 发 布 与 维护 、 
网 站 的 宣传 推广 。 

@ 第 21 章 详细 介绍 企业 网 站 建设 的 实战 案例 ， 旨 在 帮助 读者 融会 贯通 所 学 知识 ， 并 最 终 步 
入 网 站 建设 与 网 页 设计 高 手 的 行列 。 


本 书 主要 特点 


本 书 作 者 具有 多 年 网 站 设计 与 教学 经 验 ， 在 写作 本 书 时 ， 作 者 对 所 有 的 实例 都 亲自 实践 与 测 
试 ， 力 求 使 每 一 个 实例 都 真实 而 完整 地 呈现 在 读者 面前 。 本 书 具 有 如 下 特点 。 
@ 涵盖 各 种 技术 : 全 面 涵 盖 Dreamweaver、Flash、Photoshop、HTML、HTML 5 和 CSS3 等 
技术 。 
@ 内 容 全 面 : 将 网 站 建设 所 需要 掌握 的 各 种 重要 技术 进行 了 逐一 详解 ， 通 过 大 量 的 实例 ， 详 
细 介 绍 网 站 建设 的 各 过 程 ， 剖 析 了 网 站 的 策划 、 设 计 、 制 作 和 推广 的 方方面面 。 
@ 实战 性 强 : 采用 循序 渐进 的 制作 流程 进行 讲解 , 全 面 剖 析 网 页 设计 与 网 站 建设 的 制作 方法 ， 
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使 读者 在 短 时 间 内 轻松 上 手 。 
本 书 读者 对 象 


本 书 适 用 于 以 下 读者 对 象 。 
网 页 设计 与 制作 人 员 

网 站 建设 与 开发 人 员 
大 中 专 院 校 相关 专业 师 生 
网 页 制作 培训 班 学 员 

个 人 网 站 开发 爱好 者 


本 书 主要 由 何 立 、 卞 华 杰 编 车 ， 吴 秀 红 、 冯 雷 雷 、 晃 辉 、 何 洁 、 陈 石 送 、 何 琛 、 王 冬 霞 、 乔 
海 丽 、 何 海 震 、 邓 仰 伟 、 孙 雷 杰 、 孙 良 营 、 倪 庆 军 、 胡 秀 娥 、 赵 良 涛 、 徐 曦 、 葛 俊 科 、 刘 桂香 、 
葛 伟 等 人 也 参与 了 本 书 的 编写 工作 。 由 于 作者 水 平 有 限 , 加 之 创作 时 间 仓 促 ， 不 足 之 处 在 所 难免 ， 
欢迎 广大 读者 批评 指正 。 


本 书 配套 实例 素材 文件 下 载 地 址 (注意 数字 与 字母 大 小 写 ): http://pan.baidu.com/s/1gewDWKr， 
若 下 载 有 问题 ， 请 发 送 电子 邮件 至 booksaga@126.com， 邮 件 标题 为 “ 求 代码 ， 网 页 设计 与 网 站 建设 全 
攻略 实例 素材 ”。 


编 者 
2015 年 11 月 
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网 页 的 色彩 搭配 


2.1 


22 


网 页 的 在 本 概 人 wwe 1 
1.1.1 网 页 .…… 
1.1.2 HTML.... 
1.1.3 ”统一 资源 定位 符 URL 
相关 SB5 ne 
1.1.5 数据 库 … 
网 页 设计 与 网 站 建设 需要 的 常用 技术 
1.2.1 网 页 编辑 排版 软件 …. 

1.2.2 ”网 页 动画 制作 软件 
1.2.3 ”网 页 图 像 设计 软件 
1.2.4 网 页 标记 语言 HTML. 
1.2.5 网 页 脚本 语言 JavaScript 
1.2.6 动态 网 页 编程 语言 ASP.. 
常见 网 站 的 类 型 与 特点 ………… 
1 3 这 全 类 网 站 
1.3.2 ”企业 型 网 站 
1.3.3 ”娱乐 休闲 类 网 站 
1.3.4 机 构 类 网 站 … 
1.3.5 电子 商务 类 网 站 
1.3.6 ”综合 门户 类 网 站 


色彩 的 分 类 .. 
2.1.1 有 彩色 .… 
2.1.2 无 彩色 
色彩 的 三 要 素 … 
2.2.1 明度 .. 
2.2.2 色相 .. 
Ws 到 度 ， 
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2.3.1 明度 对 比 . .19 
2.3.2 ”色相 对 比 . .20 
2.3.3 ”纯度 对 比 .…. | 


2.3.4 色彩 的 面积 对 比 .. 
2.3.5 色彩 的 冷暖 对 比 . 
2.4 各 种 色彩 搭配 ……………… 
2.4.1 红色 色彩 搭配 .…… 
2.4.2 ”黄色 色彩 搭配 
2.4.3” 蓝 色色 彩 搭配 .…… 
2.4.4 ”绿色 色彩 搭配 . 
2.4.5 紫色 色彩 搭配 . 
2.4.6 梅 色 色彩 搭配 . 
2.4.7 白色 色彩 搭配 
2.4.8 ”黑色 色彩 搭配 .…… 
2.4.9 ”灰色 色彩 搭配 
25 网 页 配色 技 基 sarasasai 
2.5.1 背景 与 文字 颜色 搭配 .. 
2.5.2 ”使 用 一 种 色彩 .………… 
2.5.3 ”两 色 搭配 是 用 色 的 基础 .… 
2.5.4 色彩 的 数量 .… 


第 3 章 快速 掌握 Dreamweaver 设计 基本 网 页 .. 


3.1 _ Dreamweaver CC 简 述 Re] 
3.2 ”Dreamweaver CC 的 工作 界面 . .36 


闻 2 5 
3.2.2 插入 栏 ... 
3.2.3 
3.2.4 
3.2.5 


Ek 


3.3.1 小 实例 
3.3.2 ”小 实例 一 一 管理 本 地 站 点 
3 本 入 计 二 
3.4.1 ”小 实例 一 一 插入 普通 文本 
3.4.2 ”小 实例 一 一 设置 文本 属性 .… 
3.4.3 ”小 实例 一 一 插入 特殊 字符 .… 
SA :用 则 表 RAR 
3.5.1 ”小 实例 一 一 插入 项 目 列表 .… 


二 


3.5.2 ”使 用 编号 列表 
3.6 ”在 网 页 中 插入 文件 头 部 内 
3.6.1 插入 Meta 信息 .. 
3.6.2 ”插入 关键 字 
3.6.3 ”插入 说 明 ..……. 
3.7 ”插入 其 他 对 象 .ee 
3.7.1 小 实例 一 一 插入 日 期 . 
3.7.2 小 实例 一 一 插入 水 平 线 .… 
3.8 ”实战 一 创建 基本 文本 网 页 .… 


第 4 理 王 设计 丰富 多 形 的 图 像 和 多 媒体 网 页 汪汪 生生 62 


4.1 在 网 页 中 插入 图 像 
4.1.1 网 页 中 图 像 的 常见 格式 .. 
4.1.2 小 实例 一 一 插入 图 像 . 

4.2 ”鼠标 经 过 图 像 … 

4.3 插入 声音 .……. 
4.3.1 关于 音频 文件 格式 
4.3.2 小 实例 一 一 添加 背 

4.4 ”插入 视频 ... 
4.4.1 视频 的 文件 格式 
4.4.2 小 实例 一 一 在 网 页 中 插入 视频 .… 

4.5 插入 Flash..……….…… 

4.6 ”网 页 链接 的 创建 … 
4.6.1 ”网 页 链接 的 基本 类 型. 
4.6.2 ”小 实例 一 一 图 像 链 接 . 
4.6.3 ”小 实例 一 一 E-mail 链接 .. 
4.6.4 ”小 实例 一 一 下 载 文 件 链接 .… 
4.6.5 ”小 实例 一 一 脚本 链接 . 

4.7 ”实战 一 一 图 文 混 排 网 页 .… 


第 5 章 使 用 表格 排版 网 页 … 


5.1.2 小 实例 
5.2 ”编辑 表格 .…… 
5.2.1 选择 表格 及 其 元 素 . 
5.2.2 ”调整 表格 和 单元 格 的 大 小 . 
5.2.3 添加 、 删 除 行 或 列 . 
5.2.4” 拆 分 单元 格 .pp 


添加 内 容 到 单元 格 
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5.2.5 ”合并 单元 格 …………… 
5.2.6 拷贝、 粘贴 表格 
5.3 ”设置 表格 属性 … 
5.3.1 设置 整个 表格 的 属性 . 
5.3.2 ”设置 行 、 列 和 单元 格 
5.4 ”排序 和 整理 表格 内 容 .……… 
5.4.1 ”导入 表格 式 数 据 


5.4.2 ”排序 表格 .… 
5.5 ”实战 一 一 制作 圆 角 表 格 .…. 
第 6 章 “使 用 模板 和 库 快速 创建 网 页 09 
6.1 创建 模板 .… 


6.1.1 小 实例 一 -新建 模板 
6.1.2 ”小 实例 一 一 从 现 有 文档 创建 模板 .…. 
6.2 ”创建 可 编辑 区 域 … 要 
6.2.1 小 实例 一 插入 可 编辑 区 域 
6.2.2 ”删除 可 编辑 区 域 
6.3 ”使 用 模板 创建 网 页 .… 
6.4 创建 与 应 用 库 项 目 … 
6.4.1 页 目 .. 
6.4.2 ”小 实例 一 一 应 用 库 项 目 
6.4.3 ”小 实例 一 一 修改 库 项 目 .… 
6.5 实战 … ， 
实战 1 一 创 建 模板 Be yl 
实战 2 一 一 利用 模板 创建 网 页 


第 7 章 使 用 行为 设计 动感 特效 网 页 
1 


7.1.1 动作 .. 
7.1.2 事件 .… 
7.2 行为 的 添加 与 j 编 辑 .。 
7.2.1 行为 的 添加 .… 
7.2.2 行为 的 修改 
7.3 使 用 Dreamweaver 内 置 行为 . 
7.3.1 “小 实例 一 一 交换 图 像 . 
7.3.2 ”恢复 交换 图 像 ………… 
7.3.3 ”小 实例 一 一 打开 浏览 器 窗口 .… 
7.3.4 ”小 实例 
7.3.5 小 实例 一 一 转 到 URL .…… 


VI 
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7.3.6 “小 实例 一 一 弹出 信息 .………… 
7.3.7 “小 实例 一 一 预先 载 入 图 像 . 
7.3.8 ”小 实例 一 一 设置 状态 栏 文本 .… 
7.3.9 ”小 实例 一 一 检查 表单 … 
7.3.10 “小 实例 一 一 Blind 效果 .. 
7.3.11 ”小 实例 一 一 跳 转 菜单 … 
7.4 使 用 JavaScript 制作 网 页 特效 … 
7.4.1 小 实例 一 一 制作 滚动 文字 公告 
7.4.2 ”小 实例 一 一 禁止 下 载 网 页 图 像 


7.4.3 ”小 实例 一 一 设置 为 正 首页 ……… 
7.4.4 “小 实例 一 一 添加 到 收藏 .eeesseesssssssssssssssssasssasssnasns 
第 :3 六 本 使 用 地 SS 样式 去 美化 网 页 攻 本 和 M2 


8.1 了 解 CSS 样式 表 .. 
8.2 CSS 基本 语法 … 
8.3 设置 CSS 属性 .. 
8.3.1 设置 CSS 类 型 属性 … 

8.3.2 设置 CSS 背景 属性 

8.3.3 设置 区 块 样式 
8.3.4 设置 CSS 方 框 属性 
8.3.5 设置 边框 样式 
8.3.6 设置 CSS 列表 属性 … 

8.3.7 设置 CSS 定位 属性 

8.3.8 设置 CSS 扩展 属性 
8.3.9 ”过渡 样式 的 定义 .…. 

8.4 ”链接 到 或 导出 外 部 CSS 样式 表 . 
8.4.1 ”小 实例 一 一 创建 内 部 样式 表 .… 
8.4.2 ”小 实例 一 一 创建 外 部 样式 表 
8.4.3 ”小 实例 一 一 链接 外 部 样式 表 
With 
实战 1 一 一 应 用 CSS 样式 固定 字体 大 小 
实战 2 一 一 应 用 CSS 样式 制作 阴影 文字 

第 9 章 用 CSS+DIV 灵活 布局 页 面 
9.1 初 识 DIV .… 
9.1.1 DIV 概述 .… 
9.1.2 CSS+DIV 布局 的 优势 
9.1.2 创建 DIV.… 

92 ‘CSS Emin 
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如 今 的 互联 网 正 飞速 发 展 着 ， 伴 随 着 上 网 人 数 的 增长 ， 像 网 上 影院 、 网 络 书店 以 及 电子 商 
务 等 新 生 事物 给 人 们 的 生活 、 工 作 和 学 习 带 来 了 极 大 的 便捷 ， 正 在 影响 和 改变 着 人 们 的 生活 方 
式 。 现 代 人 掌握 网 络 方面 的 知识 不 但 是 一 种 时 尚 ， 更 是 生活 中 必需 的 基本 技能 。 本 章 主要 讲述 
网 页 的 基本 概念 、 网 页 设计 与 网 站 建设 需要 的 常用 技术 、 常 见 网 站 的 类 型 与 特点 。 


技术 要 点 


@ 网 页 的 基本 概念 
@ 网 页 设计 与 网 站 建设 需要 的 常用 技术 
@ 常见 网 站 的 类 型 与 特点 


1.1 ”网 页 的 基本 概念 


要 学 习 网 页 制作 ， 首 先 要 了 解 网 页 中 的 一 些 基本 概念 ， 如 什么 是 网 页 、HTML、URL、ASP、 
数据 库 等 。 本 节 将 介绍 网 页 中 的 一 些 基本 概念 、 从 而 为 后 面 设计 更 复杂 的 网 页 打下 良好 的 基础 。 


1.1.1 网 页 


世界 各 地 上 亿 的 人 可 以 用 Internet 通信 和 共享 信息 资源 ， 例 如 ， 可 以 发 送 或 接收 电子 邮件 通 
信 ; 可 以 与 别人 建立 联系 并 互相 索取 信息 ; 可 以 在 网 上 发 布 公告 、 宣 传 信息 ;可 以 参加 各 种 专题 
小 组 讨论 ， 可 以 免费 享用 大 量 的 信息 资源 和 软件 资源 等 。 

网 页 是 Internet 的 基本 信息 单位 ， 一 般 网 页 上 都 会 有 文本 和 图 片 等 信息 ， 而 复杂 一 些 的 网 页 
上 还 会 有 声音 、 视 频 、 动 画 等 多 媒体 内 容 。 进 入 网 站 看 到 的 是 这 个 网 站 的 主页 ， 主 页 集成 了 指向 
二 级 页 面 网 页 以 及 其 他 网 站 的 链接 , 浏览 者 进入 主页 后 可 以 浏览 最 新 的 消息 , 找到 感 兴趣 的 主题 ， 
通过 单 击 超 链接 跳 转 到 其 他 网 页 ， 如 图 1-1 所 示 。 
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HTML 称 为 超 文本 标记 语言 ， 是 一 种 标识 性 的 语言 。 它 包括 一 系列 标记 ， 通 过 这 些 标记 将 网 
络 上 的 文档 格式 统一 ， 使 分 散 的 Internet 资源 连接 成 一 个 逻辑 整体 。HTML 文本 是 由 HTML 命令 
组 成 的 描述 性 文本 ，HTML 命令 可 以 说 明文 字 、 图 形 、 动 画 、 声 音 、 表 格 和 链接 等 。 

超 文 本 是 一 种 组 织 信息 的 方式 ， 它 通过 超 链 接 方法 将 文本 中 的 文字 、 图 表 与 其 他 信息 媒体 相 
关联 。 这 些 相互 关联 的 信息 媒体 可 能 在 同一 文件 中 ， 也 可 能 是 其 他 文件 ， 或 是 地 理 位 置 相距 遥远 
的 计算 机 上 的 文件 。 这 种 组 织 信息 方式 将 分 布 在 不 同 的 位 置 的 信息 资源 用 随机 方式 进行 连接 ， 为 
人 们 查找 、 检 索 信 息 提 供 方便 ， 如 图 1-2 所 示 。 
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1-2 HTML 语言 


1.1.3 ”统一 资源 定位 符 URL 


URL 英文 全 称 是 Uniform Resource Locator， 即 “统一 资源 定位 符 ”， 它 是 一 种 通用 的 地 址 格 
式 ， 指 出 了 文件 在 Internet 中 的 位 置 。 

一 个 完整 的 URL 地 址 由 协议 名 、 服 务 器 地 址 、 在 服务 器 中 的 路 径 和 文件 名 4 部 分 组 成 。 如 
http://www.bjfhl.com/index.asp, 其 中 http:// 是 指 协议 名 , www.bjfhl.com 是 指 服务 器 的 地 址 ,index.asp 
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是 指 文件 名 ， 如 图 1-3 所 示 ， 在 浏览 器 地 址 栏 中 显示 了 完整 的 URL 地 址 。 


图 1-3 在 浏览 器 地 址 栏 中 显示 了 完整 的 URL 地 址 
1.1.4 ASP 


动态 网 页 是 与 静态 网 页 相对 应 的 ， 也 就 是 说 ， 网 页 URL 的 后 缀 不 是 htm、html、shtml、xml 
等 静态 网 页 的 常见 形式 ， 而 是 以 aspx、asp、php、perl、cgi 等 形式 为 后 级 。 从 网 站 浏览 者 的 角度 
来 看 ， 无 论 是 动态 网 页 还 是 静态 网 页 ， 都 可 以 展示 基本 的 文字 和 图 片 信息 ， 但 从 网 站 管理 、 维 护 
的 角度 来 看 却 有 很 大 的 差别 。 

动态 网 页 文件 必须 经 过 服务 器 解析 后 才能 够 浏览 。 只 有 将 动态 网 页 文件 上 传 到 支持 动态 语言 
运行 的 服务 器 ,才能 访问 浏览 。 用 户 可 以 将 安装 Windows 操作 系统 的 计算 机 设置 为 服务 器 。 如 图 
1-4 所 示 就 是 动态 网 页 开发 的 购物 系统 。 
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图 1-4 动态 网 页 开发 的 购物 系统 
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值得 强调 的 是 ， 不 要 将 动态 网 页 和 页 面 内 容 是 否 有 动感 混为一谈 。 这 里 说 的 动态 网 页 ， 与 网 
页 上 的 各 种 动画 、 滚 动 字 幕 等 视觉 上 的 动态 效果 没有 直接 关系 , 动态 网 页 也 可 以 是 纯 文字 的 内 容 ， 
也 可 以 是 包含 各 种 动画 的 内 容 , 这 些 只 是 网 页 具体 内 容 的 表现 形式 。 无 论 网 页 是 否 具有 动态 效果 ， 
只 要 是 采用 了 动态 网 站 技术 生成 的 网 页 都 可 以 称 为 动态 网 页 。 


1.1.5 ”数据库 
数据 库 是 计算 机 中 用 于 存储 、 处 理 大 量 的 数据 ， 一 些 关 于 某 个 特定 主题 的 信息 集合 。 数 据 库 
的 表 看 上 去 很 像 是 电子 表格 ， 在 其 中 可 以 按照 行 或 列 来 表示 信息 。 一 般 来 说 ， 表 的 每 一 行 称 为 一 


个 “记录 ”， 而 表 的 每 一 列 称 为 一 个 “字段 ”字段 和 记录 是 数据 库 中 最 基本 的 术语 。 记 录 描述 了 
表 中 某 一 个 实体 的 所 有 内 容 ， 而 字段 则 描述 表 中 所 有 实体 的 某 一 种 类 型 的 内 容 ， 如 图 1-5 所 示 就 
是 数据 库 的 示例 。 


1-5 数据 库 


1.2 ”网 页 设计 与 网 站 建设 需要 的 常用 技术 


设计 网 页 时 首先 要 选择 网 页 设计 工具 软件 。 虽 然 用 记事 本 手工 编写 源 代码 也 能 做 出 网 页 ， 但 
是 需要 对 编程 语言 相当 了 解 ， 并 不 适合 广大 的 网 页 设计 爱好 者 。 由 于 目前 可 视 化 的 网 页 设计 工具 
越 来 越 多 , 使 用 也 越 来 越 方便 , 所 以 设计 网 页 已 经 变 成 了 一 件 很 轻松 的 工作 。Flash、 Dreamweaver、 
Photoshop、Fireworks 这 4 个 软件 相辅相成 ， 是 设计 网 页 的 首选 工具 ， 其 中 Dreamweaver 用 来 排 
版 布局 网 页 , Flash 用 来 设计 精美 的 网 页 动画 , Photoshop 和 Fireworks 用 来 处 理 网 页 中 的 图 形 图 像 。 


1.2.1 网 页 编辑 排版 软件 


Dreamweaver CC 是 创建 网 站 和 应 用 程序 的 专业 之 选 。 它 组 合 了 功能 强大 的 布局 工具 、 应 用 
程序 开发 工具 和 代码 编辑 支持 工具 等 。Dreamweaver 不 但 功能 强大 而 且 稳定 ， 可 帮助 设计 人 员 和 
开发 人 员 轻 松 创建 和 管理 任何 站 点 ， 如 图 1-6 所 示 为 Dreamweaver CC 中 文 版 工作 界面 。 
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图 1-6 Dreamweaver CC 中 文 版 工作 界面 


1.2.2 ”网 页 动画 制作 软件 


Flash 是 一 款 多 媒体 动画 制作 软件 。 它 是 一 种 交互 式 动 画 设计 工具 ， 用 它 可 以 将 音乐 、 动 画 
以 及 富有 新 意 的 界面 融合 在 一 起 ， 以 制作 出 高 品质 的 动态 视听 效果 。 

由 于 良好 的 视觉 效果 ，Flash 技术 在 网 页 设计 和 网 络 广告 中 的 应 用 非常 广泛 ， 有 些 网 站 为 了 
追求 美观 ， 甚 至 将 整个 首页 全 部 用 Flash 方式 设计 。 从 浏览 者 的 角度 来 看 ，Flash 动画 内 容 比 起 一 
般 的 文本 和 图 片 网 页 ， 大 大 增加 了 艺术 效果 ， 对 于 展示 产品 和 企业 形象 具有 明显 的 优越 性 ， 如 图 
1-7 所 示 就 是 使 用 Flash 制作 的 网 页 动画 。 
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1-7 Flash CC 制作 的 动画 
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1.2.3 ”网 页 图 像 设 计 软 件 


网 页 中 如 果 只 是 文字 ， 则 缺少 生动 性 和 活泼 性 ， 也 会 影响 视觉 效果 和 整个 页 面 的 美观 ， 因 此 
在 网 页 的 制作 过 程 中 需要 插入 图 像 。 图 像 是 网 页 中 重要 的 组 成 元 素 之 一 。 使 用 Photoshop CC 和 
Fireworks CC 可 以 设计 出 精美 的 网 页 图 像 。 

Photoshop 是 Adobe 公司 推出 的 图 像 处 理 软件 。 目 前 已 被 广泛 应 用 于 平面 设计 、 网 页 设计 和 
照片 处 理 等 领域 。 随 着 计算 机 技术 的 发 展 ，Photoshop 已 历经 数 次 版 本 更 新 ， 功 能 越 来 越 强 大 。 如 
图 1-8 所 示 是 Photoshop CC 设计 网 页 整体 图 像 。 
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图 1-8 ”Photoshop CC 设计 网 页 整体 图 像 
1.2.4 ”网 页 标记 语言 HTML 


网 页 文档 主要 是 由 HTML 构成 。HTML 全 名 是 HyperText Markup Language， 即 超 文本 标记 
语言 ， 是 用 来 描述 WWW 上 超 文本 文件 的 语言 。 用 它 编写 的 文件 扩展 名 是 .html 或 .htm。 

HTML 不 是 一 种 编程 语言 , 而 是 一 种 页 面 描述 性 标记 语言 。 它 通过 各 种 标记 描述 不 同 的 内 容 、 
说 明 段 落 、 标 题 、 图 像 、 字 体 等 在 浏览 器 中 的 显示 效果 。 浏览 器 打开 HTML 文件 时 , 将 依据 HTML 
标记 去 显示 内 容 。 

HTML 能 够 将 Intemet 上 不 同 服务 器 上 的 文件 连接 起 来 ， 可 以 将 文字 、 声 音 、 图 像 、 动 画 和 
视频 等 媒体 有 机 组 织 起 来 ， 展 现 给 用 户 五 彩 缤纷 的 画面 。 此 外 ， 它 还 可 以 接受 用 户 信息 ， 与 数据 
库 相 连 ， 实 现 用 户 的 查询 请 求 等 交互 功能 。 

HTML 的 任何 标记 都 由 “<” 和 “>” 围 起 来 ， 如 <HTML><I>。 在 起 始 标记 的 标记 名 前 加 上 
符号 “/” 便 是 其 终止 标记 ， 如 </ 旋 ， 夹 在 起 始 标记 和 终止 标记 之 间 的 内 容 受 到 标记 的 控制 ， 例 如 
< 访 幸 福永 远 </ 态 ， 夹 在 标记 I 之 间 的 “幸福 永远 ”将 受 标 记 了 I 的 控制 。HTML 文件 的 整体 结构 也 
是 如 此 ， 下 面 就 是 最 基本 的 网 页 结构 ， 如 图 1-9 所 示 。 
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图 1-9 基本 的 网 页 结构 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title></title> 

<style type="text/css"> 

二 

.STYLE1 
color: #EF0039; 
font-size: 36px; 
font-family: "微软 雅 黑 "; 

| 

--> 

</style> 

</head> 

<body> 

<span class="STYLE1"> 中 秋 节 快乐 </span> 

</body> 

</html> 


下 面 讲述 HTML 的 基本 结构 。 
1. HTML 标记 


<html> 标 记 用 于 HTML 文档 的 最 前 面 ， 用 来 标识 HTML 文档 的 开始 。 而 </html> 标 记 恰恰 相 
反 ， 它 放 在 HTML 文档 的 最 后 面 ， 用 来 标识 HTML 文档 的 结束 ， 两 个 标记 必须 一 起 使 用 。 


2. Head 标记 


<head> 和 </head> 构 成 HTML 文档 的 开头 部 分 ， 在 此 标记 对 之 间 可 以 使 用 <title></title>、 
<script></script> 等 标记 对 ， 这 些 标记 对 都 是 描述 HTML 文档 相关 信息 的 标记 对 ，<head></head> 
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标记 对 之 间 的 内 容 不 会 在 浏览 器 的 框 内 显示 出 来 ， 两 个 标记 必须 一 起 使 用 。 
3. Body 标记 


<body></body> 是 HTML 文档 的 主体 部 分 ， 在 此 标记 对 之 间 可 包含 <p></p>、<hl></hl>、 
<br></br> 等 众多 的 标记 ， 它 们 所 定义 的 文本 、 图 像 等 将 会 在 浏览 器 内 显示 出 来 ， 两 个 标记 必须 一 
起 使 用 。 


4. Title 标记 


使 用 过 浏览 器 的 人 可 能 都 会 注意 到 浏览 器 窗口 最 上 边 蓝 色 部 分 显示 的 文本 信息 ， 那 些 信息 一 
般 是 网 页 的 “标题 ”。 要 将 网 页 的 标题 显示 到 浏览 器 的 顶部 其 实 很 简单 ， 只 要 在 <title></title> 标 记 
对 之 间 加 入 要 显示 的 文本 即 可 。 


1.2.5 ”网 页 脚本 语言 JavaScript 


使 用 JavaScript 简单 易 懂 的 脚本 语言 ， 结 合 HTML 代码 ， 即 可 快速 地 完成 网 站 的 应 用 程序 。 
脚本 语言 (JavaScript) 介 于 HTML 和 C，C++，Java，C# 等 编程 语言 之 间 ， 脚 本 是 使 用 一 种 
特定 的 描述 性 语言 ， 依 据 一 定格 式 编写 的 可 执行 文件 ， 又 称 作 批 处 理 文件 ， 脚 本 通常 可 以 由 应 用 
程序 临时 调用 并 执行 。 各 类 脚本 目前 被 广泛 应 用 于 网 页 设计 ， 因 为 脚本 不 仅 可 以 减 小 网 页 的 规模 
和 提高 网 页 浏览 速度 ， 而 且 可 以 丰富 网 页 的 表现 ， 如 动画 、 声 音 等 。 
脚本 同 VB、C 语言 的 区 别 主要 是 : 
脚本 语言 比较 简单 ， 比 较 容易 掌握 。 
脚本 与 应 用 程序 密切 相关 ， 所 以 包括 相对 应 用 程序 自身 的 功能 。 
脚本 一 般 不 具备 通用 性 ， 所 能 处 理 的 问题 范围 有 限 。 
脚本 多 为 解释 执行 。 


1.2.6 ”动态 网 页 编程 语言 ASP 


ASP 是 Active Server Page 的 缩写 , 即 为 “活动 服务 器 网 页 ” ASP 是 微软 公司 开发 的 代替 CGI 
脚本 程序 的 一 种 应 用 , 它 可 以 与 数据 库 和 其 他 程序 进行 交互 , 是 一 种 简单 、 方 便 的 编程 工具 。ASP 
网 页 文件 的 格式 是 .asp， 现 在 常用 于 各 种 动态 网 站 中 。ASP 是 一 种 服务 器 端 脚 本 编写 环境 ， 可 以 
用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。ASP 网 页 可 以 包含 HTML 标记 、 普 通 文本 、 脚 本 命 
令 以 及 COM 组 件 等 。 利用 ASP 可 以 向 网 页 中 添加 交互 式 内容 , 也 可 以 创建 使 用 HTML 网 页 作为 
用 户 界 面 的 Web 应 用 程序 。 与 HTML 相 比 ，ASP 网 页 具有 以 下 特点 。 

@ 利用 ASP 可 以 实现 突破 静态 网 页 的 一 些 功能 限制 ， 实 现 动态 网 页 技术 。 

@ ASP 文件 是 包含 在 HTML 代码 所 组 成 的 文件 中 ， 易 于 修改 和 测试 。 

@ 服务 器 上 的 ASP 解释 程序 会 在 服务 器 端 制定 ASP 程序 , 并 将 结果 以 HTML 格式 传送 到 客 

户 端 浏览 器 上 ， 因 此 使 用 各 种 浏览 器 都 可 以 正常 浏览 ASP 所 产生 的 网 页 。 
@ ASP 提供 了 一 些 内 置 对 象 ， 使 用 这 些 对 象 可 以 使 服务 器 端 脚本 功能 更 强 。 例如， 可 以 从 
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Web 浏览 器 中 获取 用 户 通过 HTML 表单 提交 的 信息 ， 并 在 脚本 中 对 这 些 信息 进行 处 理 ， 
然后 向 Web 浏览 器 发 送信 息 。 


@ ASP 可 以 使 用 服务 器 端 ActiveX 组 件 来 执行 各 种 各 样 的 任务 ,例如 存 取 数 据 库 . 收 发 E-mail 
或 访问 文件 系统 等 。 


由 于 服务 器 是 将 ASP 程序 执行 的 结果 以 HTML 格式 传 回 客户 端 浏览 器 ， 因 此 用 户 不 会 看 
到 ASP 所 编写 的 原始 程序 代码 ， 可 防止 ASP 程序 代码 被 窃取 。 


1.3 ”常见 网 站 的 类 型 与 特点 


网 站 是 多 个 网 页 的 集合 ， 目 前 没有 一 个 严谨 的 网 站 分 类 方式 。 将 网 站 按照 主体 性 质 不 同 分 为 
门户 网 站 、 电 子 商务 网 站 、 娱 乐 网 站 、 游 戏 网 站 、 时 尚 网 站 和 个 人 网 站 等 。 


1.3.1 个 人 网 站 
个 人 网 站 包括 博客 、 个 人 论坛 和 个 人 主页 等 。 网 络 的 大 发 展 趋势 就 是 向 个 人 网 站 发 展 。 个 人 


网 站 就 是 自己 的 心情 驿站 。 有 的 是 为 了 拥有 共同 爱好 的 朋友 相互 交流 而 创建 的 网 站 ， 也 有 以 自我 
介绍 的 简历 形式 网 站 ， 如 图 1-10 所 示 就 是 一 个 个 人 网 站 。 
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图 1-10 个 人 网 站 


1.3.2 ”企业 型 网 站 


企业 型 网 站 是 企业 为 了 展开 网 络 营销 而 需要 进行 网 上 销售 的 网 站 ， 一 般 以 展示 公司 产品 、 提 
升 企业 品牌 为 目的 ， 如 图 1-11 所 示 就 是 一 个 企业 型 网 站 。 
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图 1-11 企业 型 网 站 
1.3.3 ”娱乐 休闲 类 网 站 


随 着 互联 网 的 飞速 发 展 ， 不 仅 涌现 出 了 很 多 个 人 网 站 和 商业 网 站 ， 也 产生 了 大 量 的 娱乐 休闲 
类 网 站 ， 如 电影 网 站 、 音 乐 网 站 、 游 戏 网 站 、 交 友 网 站 、 社 区 论坛 和 手机 短信 网 站 等 。 这 些 网 站 
为 广大 网 民 提 供 了 娱乐 休闲 的 场所 。 

网 络 游戏 是 当今 网 络 中 热门 的 一 个 行业 ， 许 多 门户 网 站 也 专门 增加 了 游戏 频道 。 网 络 游戏 的 
网 站 与 传统 游戏 的 网 站 设计 略 有 不 同 ， 一 般 情况 下 是 矢量 风格 的 卡通 插图 为 主体 的 ， 色 彩 对 比比 
较 鲜 明 。 渐 变 的 背景 色彩 使 页 面 看 起 来 十 分 明亮 , 少许 立体 感 的 游戏 风格 使 页 面 看 起 来 十 分 有 逼 真 ， 
带 有 西方 童话 色彩 的 框架 设计 使 网 站 看 起 来 十 分 特别 ， 如 图 1-12 所 示 就 是 一 个 游戏 网 站 。 
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图 1-12 游戏 网 站 


1.3.4 机 构 类 网 站 


所 谓 机 构 类 网 站 通常 指 政府 机 关 、 非 营利 性 机 构 或 相关 社团 组 织 建立 的 网 站 ， 网 站 的 内 容 多 
以 机 构 或 社团 的 形象 宣传 和 政府 服务 为 主 。 网 站 的 设计 通常 风格 一 致 、 功 能 直观 ， 受 众 面 也 较为 
明确 ， 内 容 相对 较为 专 一 ， 如 图 1-13 所 示 就 是 政府 机 构 类 网 站 。 
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图 1-13 政府 机 构 类 网 站 


1.3.5 ”电子 商务 类 网 站 


电子 商务 类 网 站 为 浏览 者 搭建 起 一 个 网 络 平台 ,浏览 者 和 潜在 客户 在 这 个 平台 上 可 以 进行 整 
个 交易 /交流 过 程 。 电 子 商务 型 网 站 业务 更 依赖 于 互联 网 ， 是 公开 的 信息 仓库 。 

所 谓 电子 商务 是 指 利 用 当代 计算 机 、 网 络 通信 等 技术 实现 各 种 商务 活动 的 信息 化 、 数 字 化 、 
无 纸 化 和 国际 化 。 狭 义 上 说 ， 电 子 商 务 就 是 电子 贸易 ， 主 要 指 利用 在 网 上 进行 电子 交易 ， 买 卖 产 
品 和 提供 服务 ， 如 图 1-14 所 示 的 京东 商城 购物 网 站 ; 广义 上 说 ， 电 子 商 务 还 包括 企业 内 部 的 商务 
活动 ， 如 生产 、 管 理 、 财 务 以 及 企业 间 的 商务 活动 等 。 


图 1-14 京东 商城 购物 网 站 
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通过 电子 商务 网 站 ， 可 以 实现 如 下 目标 : 

能 够 使 商家 通过 网 上 销售 “ 卖 ”向 全 世界 ， 能 够 使 消费 者 足 不 出 户 “ 买 ” 遍 全 世界 。 
可 以 实现 在 线 销 售 、 在 线 购物 、 在 线 支付 ， 使 商家 和 企业 及 时 跟踪 顾客 的 购物 趋势 。 
商家 和 企业 可 以 利用 电子 商务 在 网 上 广泛 传播 自己 的 独特 形象 。 

商家 和 企业 可 以 利用 电子 商务 ， 同 合作 伙伴 保持 密切 的 联系 ， 营 造 良好 的 合作 环境 。 

可 以 为 顾客 提供 及 时 的 技术 支持 和 技术 服务 ， 降 低 服务 成 本 。 

可 以 促使 商家 和 企业 之 间 的 信息 交流 ， 及 时 得 到 各 种 信息 ， 保 证 决策 的 科学 性 和 及 时 性 。 


1.3.6 ”综合 门户 类 网 站 


门户 类 网 站 是 互联 网 的 巨人 ， 它 们 拥有 庞大 的 信息 量 和 用 户 资源 ， 这 是 此 类 网 站 的 优势 。 门 
户 类 网 站 将 无 数 信息 整合 、 分 类 ， 为 上 网 者 打开 方便 之 门 ， 绝 大 多 数 网 民 通 过 门户 类 网 站 来 寻找 
自己 感 兴趣 的 信息 资源 ， 巨 大 的 访问 量 给 此 类 网 站 带 来 了 无 限 的 商机 。 门 户 类 网 站 涉及 的 领域 非 
常 广泛 ， 是 一 种 综合 性 网 站 ， 如 搜狐 、 网 易 和 新 浪 等 。 此 外 ， 这 类 网 站 还 具有 非常 强大 的 服务 功 
能 ， 如 搜索 、 论 坛 、 聊 天 室 、 电 子 邮箱 、 虚 拟 社区 和 短信 等 。 门 户 类 网 站 的 外 观 通常 整洁 大 方 ， 
用 户 所 需 的 信息 在 上 面 基 本 都 能 找到 ， 如 图 1-15 所 示 就 是 新 浪 门户 网 站 。 


图 1-15 新 浪 门户 网 站 
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本 章 导读 


本 章 主 要 向 读者 介绍 了 网 页 设计 色彩 搭配 的 基础 知识 。 颜色 的 使 用 在 网 页 制作 中 起 着 非常 
关键 的 作用 ， 有 很 多 网 站 以 其 成 功 的 色彩 搭配 令 人 过 目 不 忘 。 但 是 对 于 刚 开 始 学 习 制 作 网 页 的 
人 来 说 ， 往 往 不 容易 轰 驭 好 网 页 的 颜色 搭配 。 好 多 网 页 设计 者 在 学 习 网 页 设计 的 时 候 ， 并 不 注 
意 色 彩 搭配 的 运用 ， 而 是 把 主要 精力 放 在 代码 编写 上 ， 结 果 导 致 费 了 很 大 工夫 设计 的 网 站 ， 却 
往往 “无 人 问津 ">， 其 中 一 个 原因 就 是 网 页 的 色彩 搭配 不 受 欢 迎 。 


技术 要 点 


@ 色彩 的 分 类 
@ 色彩 的 三 要 素 
@ 色彩 对 比 

@ 各 种 色彩 搭配 


2.1 色彩 的 分 类 


我 们 生活 在 五 彩 缤纷 的 世界 里 ， 天 空 、 草 地 、 海 洋 都 有 它们 各 自 的 色彩 。 你 、 我 、 他 也 有 自 
己 的 色彩 ， 代 表 个 人 特色 的 衣着 、 家 装 、 装 饰物 的 色彩 ， 可 以 充分 反映 人 的 性 格 、 爱 好 、 品 位 。 
色彩 一 般 分 为 有 彩色 和 无 彩色 两 大 类 。 


2.1.1 有 彩色 


有 彩色 是 指 可 见 光谱 中 的 红 、 梅 、 黄 、 绿 、 青 、 蓝 、 紫 7 种 基本 色 及 其 混合 色 ， 即 视觉 能 够 
感受 到 的 某 种 单 色光 特征 。 我 们 所 看 到 的 就 是 有 彩色 系列 ， 这 些 色彩 往往 给 人 以 相对 的 、 易 变 的 、 
抽象 的 心理 感受 ， 如 图 2-1 所 示 为 有 彩色 。 


图 2-1 有 彩色 
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有 彩色 包括 6 种 标准 色 : 红 、 橙 、 黄 、 绿 、 蓝 、 紫 ， 如 图 2-2 所 示 。 


@ 三 原色 : 三 色 中 的 任何 一 色 ， 都 不 能 用 另外 两 种 原色 混合 产生 ， 而 其 他 色 可 由 这 三 色 按 一 
定 的 比例 混合 出 来 ， 如 图 2-3 所 示 为 红 、 绿 、 蓝 三 原色 。 
黄 


‘© @ 


© ®. 
® 


图 2-2 6 种 标准 色 图 2-3 三 原色 


@ 由 三 原色 等 量 调配 而 成 的 颜色 ， 黄 色 、 青 色 、 品 红 都 是 由 两 种 及 色相 混合 而 成 ， 所 以 称 它 
们 为 二 次 色 ， 也 叫 间 色 。 红 色 + 绿 色 = 黄 色 ; 绿色 + 蓝 色 = 青 色 ; 红色 + 蓝 色 = 品 红 ; 红色 + 绿 
色 + 蓝 色 = 白 色 。 


如 图 2-4 所 示 为 有 彩色 的 网 页 ， 在 网 页 色彩 里 ， 橙 黄色 实用 于 视觉 要 求 较 高 的 时 尚 网 站 ， 属 
于 注视 、 芬 芳 的 色彩 ， 也 常 被 用 于 味觉 较 高 的 食品 网 站 ， 是 容易 引起 食欲 的 色彩 。 


届 科 二 “区 诛 站 本 一 光 


x 优 力克 汉堡 


精诚 合作 和 谐 共 赢 


全 成 部 分 公司 遇 加 时 流程 JOIN PROCESS 
28-66501661 人 各 大 目 。 尼 各 本 直 ， 过 所 全 有 二 r= 


2-4 有 彩色 网 页 
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2.1.2 无 彩色 


无 彩色 是 黑色 、 白 色 及 二 者 按 不 同比 例 混合 所 得 到 的 深浅 各 异 的 灰色 系列 。 无 彩色 系 没有 色 
相 和 纯度 ， 只 有 明度 变化 。 色 彩 的 明度 可 以 用 黑白 来 表示 ， 明 度 越 高 ， 越 接近 白色 ;， 越 接近 黑色 
时 ， 明 度 越 低 。 在 光 的 色谱 上 见 不 到 这 3 个 色 ， 所 以 称 为 无 彩色 ， 如 图 2-5 所 示 。 


黑色 灰色 白色 
图 2-5 无 彩色 


黑色 是 最 基本 和 最 简单 的 搭配 ， 白 字 黑 底 或 者 黑 底 白字 都 非常 明晰 简明 ， 如 图 2-6 所 示 的 网 
页 就 是 采用 黑 底 白字 。 


图 2-6 黑色 网 页 


灰色 是 中 性 色 ， 可 以 和 任何 色彩 搭配 ， 也 可 以 帮助 两 种 对 立 的 色彩 实现 和 谐 过 渡 ， 如 图 2-7 
所 示 就 是 灰色 搭配 的 网 页 。 


图 2-7 灰色 搭配 的 网 页 


人 IT 
2.2 色彩 的 三 要 素 


现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩色 。 其 中 黑 、 白 、 灰 属于 非 彩色 系列 。 其 他 的 色彩 都 属 
于 彩色 。 明 度 、 色 相 、 纯 度 是 色彩 最 基本 的 三 要 素 ， 也 是 人 们 正常 视觉 感知 色彩 的 3 个 重要 因素 。 


2.2.1 明度 


明度 也 叫 亮 度 ， 指 的 是 色彩 的 明暗 程度 ， 明 度 越 大 ,色彩 越 亮 。 如 一 些 购物 类 、 儿 童 类 网 站 ， 
用 的 是 一 些 鲜亮 的 颜色 ， 让 人 感觉 绚丽 多 姿 ， 生 气 勃 勃 。 明 度 越 低 ， 颜 色 越 暗 ， 主 要 用 于 一 些 游 
戏 类 网 站 ， 充 满 神秘 感 ， 一 些 个 人 站 长 为 了 体现 自身 的 个 性 ， 也 可 以 运用 一 些 暗色 调 来 表达 个 人 
的 孤僻 或 者 忧郁 等 性 格 ， 如 图 2-8 所 示 就 是 色彩 的 明度 变化 。 


#BD7803 #065FB9 
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图 2-8 色彩 的 明度 变化 


如 图 2-9 所 示 的 购物 网 站 采用 明度 大 鲜亮 的 颜色 。 游 戏 类 的 网 站 一 般 采 用 明度 低 的 色彩 ， 如 
图 2-10 所 示 的 游戏 网 站 。 


图 2-9 购物 网 站 采用 明度 大 鲜亮 的 颜色 图 2-10 游戏 网 站 采用 明度 低 的 色彩 
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色彩 的 明度 包括 无 彩色 的 明度 和 有 彩色 的 明度 。 在 无 彩色 中 ， 白色 明度 最 高 , 黑色 明度 最 低 ， 
白色 和 黑色 之 间 是 一 个 从 亮 到 暗 的 灰色 系列 :在 有 彩色 中 ， 任 何 一 种 纯度 色 都 有 着 自己 的 明度 特 
征 ， 如 黄色 明度 最 高 ， 紫 色 明 度 最 低 。 


2.2.2 色相 


色相 指 的 是 色彩 的 名 称 。 色 相 是 色彩 最 基本 的 特征 ， 是 一 种 色彩 区 别 于 另 一 种 色彩 的 最 主要 
的 因素 。 如 紫色 、 绿 色 、 黄 色 等 都 代表 了 不 同 的 色相 。 同 一 色相 的 色彩 ， 调 整 一 下 亮度 或 者 纯度 
很 容易 搭配 ， 如 深 绿 、 暗 绿 、 草 绿 。 

最 初 的 基本 色相 为 : 红 、 梅 、 黄 、 绿 、 蓝 、 紫 。 在 各 色 中 间 插 入 一 两 个 中 间 色 ， 其 头 尾 色相 ， 
按 光 谱 顺序 为 红 、 橙 红 、 黄 橙 、 黄 、 黄 绿 、 绿 、 绿 蓝 、 蓝 绿 、 蓝 、 蓝 紫 、 紫 、 红 紫 一 一 12 个 基 
本 色相 ， 如 图 2-11 所 示 。 


2-11 12 个 基本 色相 


这 12 个 色相 的 色调 变化 ， 在 光谱 色 感 上 是 均匀 的 。 如 果 进 一 步 再 找 出 其 中 间 色 ， 便 可 以 得 
到 24 个 色相 。 如 果 再 把 光谱 的 红 、 橙 、 黄 、 绿 、 蓝 、 紫 诸 色 带 圈 起 来 ， 在 红 和 紫 之 间 插 入 半幅 ， 
构成 环形 的 色相 关系 ， 便 称 为 色相 环 。 基 本 色相 间 取 中 间 色 ， 即 得 12 色相 环 。 再 进一步 便 是 24 
色相 环 。 在 色相 环 的 圆圈 里 ,各 彩 调 按 不 同 角度 排列 ， 则 12 色相 环 每 一 色相 间距 为 30" 。24 色相 
环 每 一 色相 间距 为 15" 。 

按照 色彩 在 色相 环 上 的 位 置 所 成 的 角度 ， 可 分 为 同 种 色相 、 类 似 色 、 邻 近 色 、 分 离 补 色 、 对 
比 色 、 互 补 色 。 


2.2.3 纯度 


纯度 表示 色彩 的 鲜 浊 或 纯净 程度 ， 纯 度 是 表明 一 种 颜色 中 是 否 含有 白 或 黑 的 成 分 ， 也 称 饱和 
度 。 可 见 光 谱 的 各 种 单 色光 是 最 纯 的 颜色 ， 为 极限 纯度 。 当 一 种 颜色 挫 入 黑 、 白 、 灰 或 其 他 彩色 
时 ， 纯 度 就 会 产生 变化 。 当 掺 入 的 颜色 达到 很 大 比例 时 ， 通 过 眼睛 来 看 ， 原 来 的 颜色 将 失去 本 来 
的 光彩 ， 而 变 成 挫 和 的 颜色 。 当 然 ， 并 不 等 于 说 在 这 种 被 挫 和 的 颜色 里 已 经 不 存在 原来 的 色素 ， 
只 是 由 于 大 量 地 挫 入 其 他 色彩 而 使 得 原来 的 色素 被 同化 ,人 的 眼睛 已 经 无 法 察觉 出 来 了 ,如 图 2-12 
所 示 就 是 色彩 的 纯度 变化 。 

不 同 的 色相 不 但 明度 不 等 ， 纯 度 也 不 相等 。 纯 度 体现 了 色彩 内 向 的 品格 。 同 一 色相 ， 即 使 纯 


( x IT 


度 发 生 了 细微 的 变化 ， 也 会 立即 带 来 色彩 性 格 的 变化 。 有 了 纯度 的 变化 ， 才 使 世界 上 有 如 此 丰富 
的 色彩 。 如 图 2-13 所 示 纯 度 高 的 网 页 画面 非常 鲜 活 明快 ， 如 图 2-14 所 示 较 低 的 纯度 则 显得 灰暗 
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图 2-12 色彩 的 纯度 变化 图 2-13 纯度 高 的 网 页 鲜 活 明快 


图 2-14 纯度 较 低 的 网 页 显得 灰暗 腾 胱 
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2.3 色彩 对 比 


在 一 定 条 件 下 ， 不 同色 彩 之 间 的 对 比 会 有 不 同 的 效果 。 在 不 同 的 环境 下 ， 多 色彩 给 人 一 种 印 
象 ， 单 一 色彩 给 人 另 一 种 印象 。 各 种 纯色 的 对 比 会 产生 鲜明 的 色彩 效果 ， 很 容易 给 人 带 来 视觉 与 
心理 的 满足 。 


2.3.1 明度 对 比 


明度 对 比 是 指 因 色 彩 之 间 明 暗 程 度 的 差别 而 形成 的 对 比 。 明 度 对 比 在 视觉 上 对 色彩 层次 和 空 
间 关 系 影响 较 大 ， 如 柠檬 黄 的 明度 高 ， 蓝 紫色 的 明度 低 ， 橙 色 和 绿色 属 中 明度 ， 红 色 与 蓝 色 属 中 
低 明 度 ， 如 图 2-15 所 示 就 是 色彩 的 明度 对 比 。 


图 2-15 色彩 的 明度 对 比 
明度 对 比较 强 时 光 感 强 ， 形 象 的 清晰 程度 高 、 锐 利 ， 不 容易 出 现 误差 ， 如 图 2-16 所 示 就 是 明 
度 对 比 强 的 网 页 。 明 度 对 比 弱 时 ， 则 显得 柔和 静寂 、 和 柔软 、 单 浒 、 临 暗 、 形 象 不 易 看 清 ， 如 图 2-17 
所 示 。 
对 色彩 应 用 来 说 ， 明 度 对 比 的 正确 与 否 ， 是 决定 配色 的 光 感 、 明 快感 、 清 晰 感 以 及 心理 作用 
的 关键 。 历 来 的 色彩 搭配 都 重视 黑 、 白 、 灰 的 训练 。 因 此 在 配色 中 ， 要 重视 无 彩色 的 明度 对 比 的 
研究 ， 更 要 重视 有 彩色 之 间 的 明度 对 比 的 研究 ， 注 意 检查 色彩 的 明度 对 比 及 其 效果 。 
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图 2-16 明度 对 比 强 的 网 页 


网 页 设计 与 网 站 建设 全 攻略 
我 Db 志 : 自由 划 翔 
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图 2-17 明度 对 比 弱 的 网 页 
2.3.2 ”色相 对 比 


色相 对 比 是 指 因 色相 之 间 的 差别 形成 的 对 比 。 如 图 2-18 所 示 就 是 色相 对 比 。 当 主 色相 确定 后 ， 
必须 考虑 其 他 色彩 与 主 色 相 是 什么 关系 ， 要 表现 什么 内 容 或 效果 等 ， 这 样 才能 增强 其 表现 力 。 不 
同色 相对 比 取 得 的 效果 有 所 不 同 ， 两 色 越 接 近 ， 对 比 效 果 越 柔和 ; 越 接近 补 色 ， 对 比 效果 越 强 烈 。 

黄色 在 从 儿童 网 站 甚至 企业 网 站 等 都 能 找到 自己 的 发 挥 空间 ， 通 过 结合 紫色 、 蓝 色 等 补 色 可 
以 得 到 温暖 愉快 的 效果 ， 如 图 2-19 所 示 。 


用 


图 2-18 色相 对 比 图 2-19 黄色 、 紫 色 补 色 对 比 
在 色相 环 上 ， 红 、 黄 、 蓝 是 不 能 由 其 他 颜色 混合 出 来 的 原色 ， 而 三 原色 之 间 如 按 一 定 的 比例 
混合 即 可 得 到 色相 环 上 其 他 全 部 色 。 红 、 黄 、 蓝 表现 出 最 强烈 的 色相 特征 ， 是 色相 对 比 的 极端 。 
蓝 色 与 橙色 明暗 对 比 居中 ， 冷 暖 对 比 最 强 ， 活 跃 而 生动 ， 如 图 2-20 所 示 。 


二 un 忆 
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图 2-20 ” 蓝 色 、 橙 色 补 色 对 比 
2.3.3 纯度 对 比 


纯度 对 比 是 指 因 不 同色 彩 之 间 纯 度 的 差别 而 形成 的 对 比 ， 如 图 2-21 所 示 。 色彩 纯度 可 大 致 分 
为 高 纯度 、 中 纯度 、 低 纯度 3 种 。 未 经 调和 过 的 原色 纯度 是 最 高 的 ， 而 中 间 色 多 属于 中 纯度 的 色 
彩 ， 复 色 其 本 身 纯度 偏 低 而 属于 低 纯度 的 色彩 范围 。 纯 度 的 对 比 会 使 色彩 的 效果 更 明确 肯定 。 

例如 ， 一 个 鲜艳 的 红色 与 一 个 含 灰 的 红色 并 和 置 在 一 起 ， 能 比较 出 它们 在 鲜 浊 上 的 差异 ， 如 图 
2-22 所 示 。 


图 2-21 纯度 对 比 图 2-22 纯度 对 比 的 网 页 
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2.3.4 色彩 的 面积 对 比 


面积 对 比 是 指 页 面 中 各 种 色彩 在 面积 上 多 与 少 、 大 与 小 的 差别 ， 影 响 到 页 面 主 次 关系 。 同 一 
种 色彩 ， 面 积 越 大 ， 明 度 、 纯 度 越 强 ; 面积 越 小 ， 明 度 、 纯 度 越 低 。 面 积 大 的 时 候 ， 亮 的 色 显得 
更 轻 ， 暗 的 色 显得 更 重 ， 这 种 现象 称 为 色彩 的 面积 效果 。 

如 图 2-23 所 示 色 彩 的 面积 对 比 , 不 同 的 面积 对 比 使 色彩 显示 出 不 同 的 强度 , 产生 不 同 的 色彩 
对 比 效 果 。 


中 达 房 产 有 限 公司 


图 2-23 色彩 的 面积 对 比 


2.3.5 色彩 的 冷暖 对 比 


冷暖 对 比 是 指 因 不 同色 彩 之 间 的 冷暖 差别 形成 的 对 比 。 色 彩 分 为 冷 、 暖 两 大 色 系 ， 以 红 、 橙 、 
黄 为 暖色 系 ， 蓝 、 绿 、 紫 则 代表 着 冷色 系 ， 两 者 基本 上 互 为 补 色 关 系 。 另 外 ， 色 彩 的 冷暖 对 比 还 
受 明度 与 纯度 的 影响 ， 白 色 反射 高 而 感觉 冷 ， 黑 色 吸 收 率 高 而 感觉 暖 。 
@ 上 暖色 : 如 图 2-24 中 的 黄色 、 橙 色 、 红 色 、 紫 色 等 属于 暖色 系列 。 上 暖色 与 黑色 调和 可 以 达到 
很 好 的 效果 。 上 暖色 一 般 应 用 于 购物 类 网 站 、 儿 童 类 网 站 等 ， 用 以 体现 商品 的 琳琅 满目 ， 儿 
童 类 网 站 的 活 浅 、 温 声 等 效果 。 
@ 冷色 : 如 图 2-25 中 的 绿色 、 蓝 色 、 蓝 紫色 等 属于 冷色 系列 。 冷色 与 白色 调和 可 以 达到 一 种 
很 好 的 效果 。 冷 色 一 般 应 用 于 一 些 高 科技 网 站 ， 主 要 表达 严肃 、 稳 重 等 效果 。 


图 2-24 暖色 图 2-25 冷色 
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运用 冷暖 色 的 对 比 可 以 较 好 地 处 理 色 彩 的 主 从 关系 ， 即 页 面 主要 表现 部 分 可 加 强 色彩 的 冷暖 
对 比 ， 次 要 部 分 和 衬托 部 分 的 色彩 对 比 可 适度 减弱 ， 如 图 2-26 所 示 。 


大 华 包 装 有 限 公司 


全 98 袜 Saaa 


图 2-26 主要 部 分 加 强 色彩 的 冷暖 对 比 


2.4 各 种 色彩 搭配 


千 万 年 来 的 生活 实践 ， 人 类 由 鲜血 的 红色 、 植 物 的 绿色 、 稻 麦 的 黄色 、 海 洋 的 蓝 色 等 各 种 自 
然 色彩 中 形成 了 一 系列 共同 的 印象 ， 使 人 们 对 色彩 赋予 了 特别 的 象征 意义 。 


2.4.1 红色 色彩 搭配 


红色 的 色 感 温暖 , 性 格 刚 烈 而 外 向 , 是 一 种 对 人 刺激 性 很 强 的 颜色 。 红色 容易 引起 人 的 注意 ， 
也 容易 使 和 人 兴奋、 激动、 紧张 、 冲 动 ， 还 是 一 种 容易 造成 人 视觉 疲劳 的 颜色 。 在 众多 颜色 里 ， 红 
色 是 最 鲜明 生动 的 、 最 热烈 的 颜色 。 因 此 ， 红 色 也 是 代表 热情 的 情感 之 色 。 鲜 明 红色 极 容易 吸引 
人 们 的 目光 ， 如 图 2-27 所 示 是 以 红色 为 主 的 网 页 。 


Redjuice 上 全 入 


Why we are best 


图 2-27 红色 为 主 的 网 页 
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在 网 页 颜色 的 应 用 中 ， 根 据 网 页 主题 内 容 的 需求 ， 纯 粹 使 用 红色 为 主 色调 的 网 站 相对 较 少 ， 
多 用 于 辅助 色 、 点 睛 色 ， 达 到 陪衬 、 醒 目的 效果 。 这 类 颜色 的 组 合 比较 容易 使 人 提升 兴奋 度 ， 红 
色 特 性 明显 ， 这 一 醒目 的 特殊 属性 ， 被 广泛 地 应 用 于 节庆 、 食 品 、 时 尚 休闲 、 化 妆 品 和 服装 等 类 
型 的 网 站 ， 容 易 营造 出 娇媚 、 诱 惑 、 艳 丽 等 气氛 。 


2.4.2 黄色 色彩 搭配 


黄色 是 阳光 的 色彩 ， 具有 活泼 与 轻快 的 特点 , 给 人 十 分 年 轻 的 感觉 象征 光明 、 希 望 、 高 贵 、 
愉快 。 它 的 亮度 最 高 ， 和 其 他 颜色 配合 很 活泼 ， 有 温暖 感 。 黄 色 也 代表 着 士 地 、 象 征 着 权力 ， 并 
且 还 具有 神秘 的 宗教 色彩 ， 如 图 2-28 就 是 使 用 黄色 为 主 的 网 页 。 

浅黄 色 系 明朗 、 愉 快 、 希 望 、 发 展 , 它 的 雅 怪 清爽 属性 ， 较 适合 用 于 女性 及 化 妆 品 类 网 站 。 
中 黄色 有 崇高 、 尊 贵 、 辉 煌 、 注 意 、 扩 张 的 心理 感受 。 深 黄色 给 人 高 贵 、 温 和 、 稳 重 的 心理 感受 。 


reoem 加 monme 局 Asanom 


Gerting Started With Different ideas 


Nulla elementum lobortis arcu 


Client Testimonials 


图 2-28 黄色 为 主 的 网 页 
2.4.3” 蓝 色色 彩 搭配 


由 于 蓝 色 给 人 以 沉稳 的 感觉 ， 且 具有 智慧 、 准 确 的 意象 ， 在 商业 设计 中 强调 科技 、 效 率 的 商 
品 或 企业 形象 ， 大 多 选用 蓝 色 当 标准 色 、 企 业 色 ， 如 计算 机 、 汽 车 、 影 印 机 、 摄 影 器 材 等 。 另 外 ， 
蓝 色 也 代表 忧郁 和 浪漫 ,这 个 意象 也 常 运用 在 文学 作品 或 感性 诉求 的 商业 设计 中 ,如 图 2-29 就 是 
使 用 蓝 色 为 主 的 网 页 。 
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图 2-29 蓝 色 为 主 的 网 页 
2.4.4 绿色 色彩 搭配 


在 商业 设计 中 ， 绿 色 所 传达 的 是 清爽 、 理 想 、 希 望 、 生 长 的 意象 ， 符 合 服务 业 、 卫 生 保健 业 、 
教育 行业 、 农 业 的 要 求 。 在 工厂 中 ， 为 了 避免 操作 时 眼睛 疲劳 ， 许 多 机 械 也 是 采用 绿色 ; 一 般 的 
医疗 机 构 场 所 ， 也 常 采用 绿色 来 做 空间 色彩 规划 ， 如 图 2-30 就 是 使 用 绿色 为 主 的 网 页 。 


图 2-30 绿色 为 主 的 网 页 


2.4.5 紫色 色彩 搭配 


由 于 具有 强烈 的 女性 化 性 格 ， 在 商业 设计 用 色 中 ， 紫色 受 到 相当 的 限制 ， 除 了 和 女性 有 关 的 
商品 或 企业 形象 外 ， 其 他 类 的 设计 不 常 采用 为 主 色 ， 如 图 2-31 就 是 使 用 紫色 为 主 的 网 页 。 


( \ IT 


26 


[简约 O 主 义 ] 


优 共 要 议 茵 力 女 性 全 牛 友 音 启 所 。 闻 


sr 


bs* 


> Hor nmr 


图 2-31 紫色 为 主 的 网 页 


2.4.6 橙色 色彩 搭配 


栖 色 具有 轻快 、 欢 欣 、 收 获 、 温 声 、 时 尚 的 效果 ， 是 快乐 、 喜 悦 、 能 量 的 色彩 。 在 整个 色谱 
里 ， 橙 色 具 有 兴奋 度 ， 是 最 耀眼 的 色彩 。 给 人 以 华贵 而 温暖 ， 兴 奋 而 热烈 的 感觉 ， 也 是 令 人 振奋 
的 颜色 ， 具 有 健康 、 富 有 活力 、 勇 敢 自 由 等 象征 意义 。 橙 色 在 空气 中 的 穿 透 力 仅 次 于 红色 ， 也 是 
容易 造成 视觉 疲劳 的 颜色 。 

在 网 页 颜色 里 ， 梅 色 适 用 于 视觉 要 求 较 高 的 时 尚 网 站 ， 属 于 注目 、 芳 香 的 颜色 ， 也 常 被 用 于 
味觉 较 高 的 食品 网 站 ， 是 容易 引起 食欲 的 颜色 ， 如 图 2-32 所 示 就 是 使 用 森 色 的 网 页 。 
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所 荣 纺 织品 有 限 公司 


图 2-32 橙色 为 主 的 网 页 


2.4.7 白色 色彩 搭配 


在 商业 设计 中 白色 具有 洁白 、 明 快 、 纯 真 、 清 洁 的 意象 ， 通 常 需要 和 其 他 色彩 搭配 使 用 。 纯 
白色 给 人 以 寒冷 、 严 峻 的 感觉 ， 所 以 在 使 用 纯 白 色 时 ， 都 会 挫 入 一 些 其 他 的 色彩 ， 如 象牙 白 、 米 
白 、 乳 白 等 。 在 生活 用 品 和 服饰 用 色 上 ， 白 色 是 永远 流行 的 主要 色 ， 可 以 和 任何 颜色 搭配 。 


2.4.8 黑色 色彩 搭配 


黑色 也 有 很 强大 的 感染 力 ， 它 能 够 表现 出 特有 的 高 贵 ， 且 黑色 还 经 常用 于 表现 死亡 和 神秘 。 
在 商业 设计 中 ， 黑 色 是 许多 科技 产品 的 用 色 ， 如 电视 、 汽 车 、 摄 影 机 、 音 响 、 仪 器 等 。 在 其 他 方 
面 ， 黑 色 庄严 的 意象 也 常用 在 一 些 特殊 场合 的 空间 设计 上 。 生 活用 品 和 服饰 设计 大 多 利用 黑色 来 
塑造 高 贵 的 形象 。 黑色 也 是 一 种 流行 的 主要 颜色 ,适合 与 多 种 色彩 搭配 ， 如 图 2-33 所 示 就 是 使 用 
黑色 为 主 的 网 页 。 


website、 


图 2-33 黑色 为 主 的 网 页 
2.4.9 灰色 色彩 搭配 


在 商业 设计 中 ， 灰 色 具 有 柔和 、 高 雅 的 意象 ， 而 且 属 于 中 间 性 格 ， 男 女 皆 能 接受 ， 所 以 灰色 
也 是 流行 的 主要 颜色 。 许 多 高 科技 产品 ,尤其 是 和 金属 材料 有 关 的 ， 几 乎 都 采用 灰色 来 传达 高 级 、 
技术 的 形象 。 使 用 灰色 时 ， 大 多 利用 不 同 层次 的 变化 组 合 和 与 其 他 色彩 搭配 ， 才 不 会 过 于 平淡 、 
沉闷 、 呆 板 和 僵硬 ， 如 图 2-34 所 示 就 是 使 用 灰色 为 主 的 网 页 。 
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图 2-34 灰色 为 主 的 网 页 


2.5 ”网 页 配色 技巧 


网 页 配色 很 重要 ， 网 页 颜色 的 搭配 好 坏 与 否 直 接 影响 到 访问 者 的 情绪 。 好 的 色彩 搭配 会 给 访 
问 者 带 来 很 强 的 视觉 冲击 力 ， 不 好 的 色彩 搭配 则 会 让 访问 者 浮躁 不 安 。 下 面 就 来 讲述 网 页 色彩 拱 
配 的 技巧 。 


2.5.1 背景 与 文字 颜色 搭配 


文字 内 容 和 网 页 的 背景 色 对 比 要 突出 ， 底 色 深 ， 文 字 的 颜色 就 要 浅 ， 以 深 色 的 背景 衬托 浅 色 
的 内 容 (文字 或 图 片 ); 反之 ， 底 色 淡 ,文字 的 颜色 就 要 深 些 ， 以 浅 色 的 背景 衬托 深 色 的 内 容 ( 文 
字 或 图 片 )。 如 图 2-35 所 示 就 是 背景 与 文字 颜色 搭配 合理 的 一 个 示例 。 
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图 2-35 背景 与 文字 颜色 搭配 合理 
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如 图 2-36 所 示 就 是 网 页 背景 与 文字 适合 的 搭配 色 。 
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图 2-36 网 页 背景 与 文字 适合 的 搭配 色 


交 白 色 背 景 太 

采用 纯 黑 色 的 字 效 果 最 好 。 
采用 蓝 色 的 字 效 果 也 很 好 。 
采用 红色 的 字 效 果 也 不 错 。 
采用 浅黄 色 的 字 效 果 较 差 。 
采用 浅 灰 色 的 字 效 果 也 差 。 
采用 绿色 的 字 效 果 也 较 差 。 


如 图 2-37 所 示 是 白色 背景 的 网 页 ， 黑 色 的 文字 效果 就 比较 好 ， 灰 色 的 文字 效果 不 是 很 好 。 
RN | Er 


ey 


图 2-37 ”白色 背景 的 网 页 


六 蓝 色 背 景 太 

采用 纯 白色 的 字 效 果 最 好 。 
采用 橘 黄色 的 字 效 果 也 好 。 
采用 浅黄 色 的 字 效 果 也 好 。 
采用 瞳 红色 的 字 效 果 较 差 。 
采用 黑色 的 字 效 果 也 较 差 。 
采用 紫色 的 字 效 果 也 不 好 。 


如 图 2-38 所 示 蓝 色 背 景 的 网 页 ， 白 色 的 文字 效果 就 比较 好 ， 黑 色 或 灰色 的 文字 效果 不 是 
很 好 。 
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六 黑色 背景 太 


采用 纯 白色 的 字 效 果 最 好 。 
采用 桶 黄色 的 字 效 果 也 好 。 
采用 浅黄 色 的 字 效 果 也 好 。 
采用 蓝 颜 色 的 字 效 果 较 差 。 
采用 暗 红色 的 字 效 果 较 差 。 
采用 紫色 的 字 效 果 也 较 差 。 


图 2-38 蓝 色 背 景 的 网 页 


如 图 2-39 所 示 就 是 黑色 背景 的 网 页 ， 文 字 采 用 浅黄 色 ， 效 果 比 较 好 。 


图 2-39 黑色 背景 的 网 页 
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2.5.2 ”使 用 一 种 色彩 


同 种 色彩 搭配 是 指 首 先 选 定 一 种 色彩 ， 然 后 调整 透明 度 或 饱和 度 ， 将 色彩 变 淡 或 加 深 ， 产 生 
新 的 色彩 。 这 样 的 页 面 看 起 来 色彩 统一 ， 有 层次 感 ， 如 图 2-40 所 示 就 是 使 用 同一 种 色彩 的 示例 。 


图 2-40 同 种 色彩 搭配 


2.5.3 ”两 色 搭配 是 用 色 的 基础 


色彩 搭配 就 是 色彩 之 间 的 相互 衬托 和 相互 作用 ， 两 色 搭 配 是 用 色 的 基础 。 那 么 怎样 选择 两 色 
搭配 呢 ? 

1. 选择 相 邻 两 色 搭配 

如 图 2-41 所 示 就 是 相 邻 的 两 种 色 ， 相 邻 色 的 配色 技巧 如 下 。 


@ 一 种 颜色 纯度 比较 高 的 时 候 ， 另 一 种 颜色 选择 纯度 低 或 明度 低 的 。 当 你 调节 了 颜色 相互 作 
用 的 力量 ,色彩 之 间 有 主 次 关系 搭配 效果 自然 就 和 谐 了 , 如 图 2-42 所 示 就 是 相 邻 色 搭配 的 
网 页 。 

@ 可 以 将 选 定 的 同一 色相 ， 仅 仅 调 整 它 的 明度 或 纯度 值 ， 得 到 另 一 色彩 后 ， 将 两 者 搭配 。 


图 241 相 邻 的 两 种 色 
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图 2-42 相 邻 色 搭配 的 网 页 
2. 选择 对 比 色 搭配 


如 图 2-43 所 示 就 是 对 比 色 。 对 比 色 搭配 的 网 页 中 ,不 同 的 区 域 要 有 区 别 ,可 适当 调整 其 中 一 
种 颜色 的 明度 或 饱和 度 ， 如 图 2-44 所 示 就 是 对 比 色 搭 配 的 网 页 。 
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图 2-43 ”对比 色 
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图 2-44 ”对比 色 搭 配 的 网 页 


2.5.4 色彩 的 数量 


一 般 初 学 者 在 设计 网 页 时 往往 使 用 多 种 颜色 ， 使 网 页 变 得 很 “ 花 ”， 缺 乏 统一 和 协调 ， 表 面 
上 看 起 来 很 花哨 ， 但 缺乏 内 在 的 美感 。 事 实 上 ， 网 站 用 色 并 不 是 越 多 越 好 ， 一 般 控 制 在 三 种 色彩 
以 内 ， 通 过 调整 色彩 的 各 种 属性 来 产生 变化 。 只 要 控制 在 不 超出 三 种 色相 的 范围 即 可 ， 设 计 用 色 
是 越 少 越 好 ， 如 图 2-45 所 示 就 是 色彩 的 数量 不 超过 三 种 。 


#7 | WN | kN 


证 公司 向 介 吉 则 和 网 取 芝 生 娄 邮 公司 东 涉 新 闻 中 心 人 才 相 时 过 世系 用 们 hvr 


局 品质。 高 允 素 


专业 打造 木门 车 各 > 
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2-45 色彩 的 数量 不 超过 三 种 
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章 ”快速 掌握 Dreamweaver 


设计 基本 网 页 


本 章 导 读 


Dreamweaver CC 包含 了 一 个 新 新 、 高 效 的 页 面 ， 性 能 也 得 到 了 改进 。 此 外 ， 还 包含 了 众 
多 新 增 功能 ， 改 善 了 软件 的 易 用 性 ， 用 户 无 论 使 用 设计 视图 还 是 代码 视图 都 可 以 方便 地 创建 网 
页 。 本 章 主 要 讲述 Dreamweaver CC 界面 ， 创 建 本 地 站 点 、 管 理 站 点 ， 在 网 页 中 输入 文本 以 及 
插入 其 他 网 页 文本 元 素 。 通 过 本 章 的 学 习 ， 可 以 初步 了 解 认识 Dreamweaver CC。 


@ Dreamweaver CC 的 工作 界面 
@ 掌握 创建 与 管理 站 点 

@ 掌握 在 网 页 中 插入 文本 

@ 掌握 插入 其 他 文本 元 素 


I SEN 划 | 
电 


A FN 
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插入 普通 文本 创建 项 目 列表 效果 
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插入 时 间 效 果 创建 基本 文本 网 页 


3.1 _ Dreamweaver CC 简 述 


近年 来 ， 随 着 网 络 信息 技术 的 广泛 应 用 ， 互 联网 正 逐 步 改 变 着 人 们 的 生活 和 工作 方式 。 越 来 
越 多 的 个 人 、 企 业 纷纷 建立 自己 的 网 站 ， 利 用 网 站 来 宣传 和 推广 自己 。 制 作 网 页 的 软件 也 很 多 ， 
Adobe 公司 的 Dreamweaver 无 疑 是 其 中 使 用 最 为 广泛 的 一 个 ， 它 以 强大 的 功能 和 友好 的 操作 界面 
受到 了 广大 网 页 设计 者 的 欢迎 ， 成 为 设计 者 制作 网 页 的 首选 软件 。 

Dreamweaver CC 官方 中 文 绿色 版 是 世界 上 最 优秀 的 可 视 化 网 页 设计 工具 之 一 ， 最 直观 的 感 
受 是 这 次 更 新 增强 了 CSS 可 视 化 编辑 功能 , 而 且 原 来 的 Adobe Dreamweaver CS6 中 出 现 的 选取 代 
码 不 精准 的 问题 也 解决 了 。Adobe Dreamweaver CC 最 大 的 更 新 莫 过 于 Edge Web Fonts 和 Edge 
Animate 整合 ， 支 持 CSS3、CSS 可 视 化 设计 增强 和 拖 动 jQuery UI Widget。 

Dreamweaver CC 新 增 了 更 加 友善 直观 的 视觉 化 CSS 编辑 工具 ,让 Web 开发 者 更 快速 地 生成 
简洁 的 CSS 代码 ; 创新 的 jQuery UI Widget、Edge Web Fonts 让 文字 更 加 鲜明 、CSS3 转换 、jQuery 
和 jQuery Mobile 支持 以 及 对 HTMLS5 更 完善 的 支持 等 。Dreamweaver CC 简体 中 文 版 是 更 加 快速 
理想 的 Web 开发 工具 。 
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(Da 和 
3.2” Dreamweaver CC 的 工作 界面 


Dreamweaver CC 是 集 网 页 制作 和 网 站 管理 于 一 身 的 “所 见 即 所 得 ”的 网 页 编辑 软件 ， 它 以 
强大 的 功能 和 友好 的 操作 界面 备 受 广大 网 页 设计 者 的 欢迎 ， 已 经 成 为 网 页 制作 的 首选 软件 ， 如 图 
3-1 所 示 就 是 Dreamweaver CC 工作 界面 。 


菜单 栏 


[Dw 画 OEIsLz] 


村- 
SHH Wi EW BAD NAIM WC) FC) a EC 
rived 


I 


面板 组 
文档 窗口 


属性 面板 一 一 访 


图 3-1 Dreamweaver CC 工作 界面 


3.2.1 菜单 栏 


菜单 栏 包括 “文件 (F)”“ 编 辑 (E)”“ 查 看 (V)”“ 揪 入 (D”“ 修 改 (M)”“ 格 式 (0)”、 
“命令 (C)”“ 站 点 (S)”“ 窗 口 (W)” 和 “帮助 (H)”10 个 菜单 ， 如 图 3-2 所 示 。 


文件 (了 ”编辑 (E) 查看 (V) 插入 (1 修改 (M) ”格式 (D) 命令 (CQ) ”站 点 (S) ”窗口 (W) ”帮助 (H) 


图 3-2 菜单 栏 
@ “文件 ”菜单 : 用 来 管理 文件 ， 包 括 创建 和 保存 文件 、 导 入 与 导出 文件 、 浏 览 和 打印 
文件 等 。 
@ “编辑 ”菜单 : 用 来 编辑 文本 ， 包 括 撤销 与 恢复 、 复 制 与 粘贴 、 查 找 与 替换 、 参 数 设置 和 
快捷 键 设置 等 。 
@ “查看 ”菜单 : 用 来 查看 对 象 ， 包 括 代 码 的 查看 、 网 格 线 与 标尺 的 显示 、 面 板 的 隐藏 和 工 
具 栏 的 显示 等 。 


@ “插入 ”菜单 : 用 来 插入 网 页 元 素 ， 包 括 插入 图 像 、 多 媒体 、 表 格 、 布 局 对 象 、 表 单 、 电 
子 邮 件 链 接 、 日 期 和 HTML 等 。 

@ “修改 ”菜单 : 用 来 实现 对 页 面 元 素 修改 的 功能 ， 包 括 页 面 属性 、CSS 样式 、 快 速 标签 编 
辑 器 、 链 接 、 表 格 、 框 架 、AP 元 素 与 表格 的 转换 、 库 和 模板 等 。 

@ “格式 ”菜单 : 用 来 对 文本 进行 操作 ， 包 括 字 体 、 字 形 、 字 号 、 字 体 颜 色 、HTML/CSS 样 
式 、 段 落 格式 化 、 扩 展 、 缩 进 、 列 表 、 文 本 的 对 齐 方式 等 。 

@ “命令 ”菜单 : 收集 了 所 有 的 附加 命令 项 ， 包 括 应 用 记录 、 编 辑 命令 清单 、 获 得 更 多 命令 、 
扩展 管理 、 清 除 HTML/Word HTML、 检 查 拼写 和 排序 表格 等 。 
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@ “站 点 ”菜单 : 用 来 创建 与 管理 站 点 ， 包 括 新 建站 点 、 管 理 站 点 、 上 传 与 存 回 和 查看 链接 等 。 

@ “窗口 ”菜单 : 用 来 打开 与 切换 所 有 的 面板 和 窗口 ， 包 括 插入 栏 、 属 性 面板 、 站 点 窗口 和 
CSS 面板 等 。 

@ “帮助 ”菜单 : 内 含 Dreamweaver 帮助 、Spry 框架 帮助 、Dreamweaver 支持 中 心 、 产 品 注 
册 和 更 新 等 。 


3.2.2 插入 栏 


插入 栏 有 两 种 显示 方式 ， 一 种 是 以 菜单 方式 显示 ， 另 一 种 是 以 制 表 符 方式 显示 。 插 入 栏 中 放 
置 的 是 制作 网 页 过 程 中 经 常用 到 的 对 象 和 工具 ， 通 过 插入 栏 可 以 很 方便 地 插入 网 页 对 象 ， 有 “ 常 
用 ”插入 栏 、“ 结 构 ” 插 入 栏 、“ 表 单 ” 插 入 栏 、“ 媒 体 ” 插 入 栏 、“jQuery Mobile” 插 入 栏 、“jQuery 
UI” 插 入 栏 “模板 ”插入 栏 和 “收藏 来 ”插入 栏 等 ， 如 图 3-3 所 示 就 是 “常用 ”插入 栏 。 


图 3-3 “常用 ”插入 栏 
@ Div: 可 以 使 用 Div 标签 创建 CSS 布局 块 ， 并 在 文档 中 对 它们 进行 定位 。 
@ HTML5 Video: HTML5 视频 元 素 提供 一 种 将 电影 或 视频 谈 入 网 页 中 的 标准 方式 。 
@ 画布 : 画布 元 素 是 动态 生成 的 图 形 的 容器 。 这 些 图 形 是 在 运行 时 使 用 脚本 语言 ( 如 
JavaScript ) 创建 的 。 
图 像 : 在 文档 中 插入 图 像 和 导航 栏 等 , 单 击 右 侧 的 小 三 角 , 可 以 看 到 其 他 与 图 像 相关 的 按钮 。 
表格 : 建立 主页 的 基本 构成 元 素 ， 即 表格 。 
Head: 用 于 定义 网 页 文档 的 头 部 ， 它 是 所 有 头 部 元 素 的 容器 。 
脚本 : 插入 脚本 。 
Hyperlink: 创建 超 链接 。 
电子 邮件 链接 : 创建 电子 邮件 链接 ， 只 要 指定 要 链接 邮件 的 文本 和 邮件 地 址 ， 就 可 以 自动 
插入 邮件 地 址 发 送 链接 。 
水 平 线 : 在 网 页 中 插入 水 平 线 。 
日 期 : 插入 当前 时 间 和 日 期 。 
@ IFRAME: 插入 IFRAME 框架 。 
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日 字符 : 在 网 页 中 插入 相应 的 字符 符号 。 
3.2.3 ”浮动 面板 


Dreamweaver 中 的 面板 可 以 自由 组 合成 为 面板 组 。 每 个 面板 组 都 可 以 展开 和 折 肝 ,并 且 可 以 
和 其 他 面板 组 停靠 在 一 起 或 取消 停靠 。 面 板 组 还 可 以 停靠 到 集成 的 应 用 程序 窗口 中 ， 这 样 能 够 很 
容易 地 访问 所 需 的 面板 ， 而 不 会 使 工作 区 变 得 混乱 ， 如 图 3-4 所 示 。 


3-4 面板 组 
3.2.4 ”属性 面板 


“属性 ”面板 主要 用 于 查看 和 更 改 所 选 对 象 的 各 种 属性 ， 每 种 对 象 都 具有 不 同 的 属性 。 在 “ 属 
性 ”面板 包括 两 种 选项 ， 一 种 是 HTML 选项 ， 将 默认 显示 文本 的 格式 、 样 式 和 对 齐 方式 等 属性 ， 
如 图 3-5 所 示 ; 另 一 种 是 CSS 选项 ， 单 击 “ 属 性 ”面板 中 的 CSS 选项 ， 可 以 在 CSS 其 中 设置 各 
种 属性 ， 如 图 3-6 所 示 。 


| 
站 得 直 中 点 A 交 本 中 


图 3-5 HTML 选项 


”| 字 洒 如 口 对 认 闻 体 名 二 
吉 风 555 吉 板 区] 大小 加 无 。 加 


[3 
国 攻 水 平 四 台 人 =] 寓 四 了 横行 外 门 并 果 新 双 G 站 
i 瑚 中 由 ， -| 言 W 标 攻 加 站 


图 3-6 CSS 选项 
3.2.5 ”文档 窗口 
文档 窗口 也 称 文档 编辑 区 ， 在 “设计 ”视图 中 ， 文 档 窗口 中 显示 的 文档 近似 于 在 浏览 器 中 显 


示 的 情形 ; 在 “代码 ”视图 中 ， 显 示 当 前 所 创建 和 编辑 的 HTML 文档 内 容 ; 在 “ 拆 分 ”视图 中 ， 
同时 满足 了 上 述 两 种 不 同 的 设计 要 求 ， 文 档 窗口 如 图 3-7 所 示 。 
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3-7 文档 窗口 


3.3 ”创建 与 管理 站 点 


建立 本 地 站 点 就 是 在 本 地 计算 机 硬盘 上 建立 一 个 文件 夹 并 用 这 个 文件 夹 作为 站 点 的 根 目录 ， 
然后 将 网 页 以 及 其 他 相关 的 文件 ， 如 图 片 、 声 音 、html 文件 存放 在 该 文件 夹 中 。 当 准备 发 布 站 点 
时 ， 将 文件 夹 中 的 文件 上 传 到 Web 服务 器 即 可 。 


3.3.1 小 实例 一 一 创建 本 地 站 点 


制作 网 页 之 前 首先 要 建立 一 个 本 地 站 点 ， 具 体操 作 步 骤 如 下 。 
步 又 014 执行 “站 点 ”|“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 单 击 “ 新 建 
站 点 ”按钮 ， 如 图 3-8 所 示 。 
步骤 024 弹出 “站 点 设置 对 象 未 命名 站 点 2” 对 话 框 ， 在 对 话 框 中 “站 点 ”选项 卡 的 “站 点 名 
称 ” 文 本 框 中 输入 名 称 ， 如 图 3-9 所 示 。 


[7] = preamaeaver 站 上 是 网 站 中 全 用 的 所 有 之 件 和 客 的 入 襄 。preamaeaver 
本 攻 和 


和 可 下 直 外 为 Dreammese 未 点 选 捍 好 文件 夫 和 人 入 


Ta [EE 
| [rm | [一 省 一 | 与 入 |][- 吊 
图 3-8 “管理 站 点 ”对 话 框 3-9 输入 站 点 的 名 称 
六 高 手 支 招 女 


要 制作 一 个 网 站 ， 第 一 步 操作 都 是 一 样 的 ， 就 是 要 创建 一 个 “站 点 "， 这 样 可 以 使 整个 网 站 的 脉络 结 
构 清晰 地 展现 在 面前 ， 避 免 了 以 后 再 进行 纷 杂 的 管理 。 


( s IT 


步 双 03M 单 击 “ 本 地 站 点 文件 夹 ”文本 框 右边 的 文件 夹 按钮 国 ， 弹 出 “选择 根 文件 夹 ”对话 框 ， 
在 对 话 框 中 选择 相应 的 位 置 ， 如 图 3-10 所 示 。 
步 双 04 单 击 “ 选 择 文件 来” 按钮， 选择 文件 位 置 ， 如 图 3-11 所 示 。 


和 Dreamweavar 站 全- 和 Dreamweaver 
rd 各 本 以 相持 外 为 Drsamwssver 站 点 选择 二 地 文件 夫 和 名 称 * 
| | (ee ; 国 
| 4 | | a 
图 3-10 “选择 根 文件 来” 对话 框 图 3-11 选择 文件 位 置 
步骤 05 单 击 “保存 ”按钮 ， 返 回 到 “管理 站 点 ”对 话 框 ， 对 话 框 中 显示 了 新 建 的 站 点 ， 如 图 
3-12 所 示 。 
步骤 064 单 击 “ 完 成 ”按钮 ， 在 “文件 ”面板 中 可 以 看 到 创建 的 站 点 内 的 文件 ， 如 图 3-13 所 示 。 
| 
i 一 [Dam 了 ja 加 | 
EE i 尹 人 人 Y 久 各 | 名 
7 ET 文人 
re 人 六 
一 网 加 车 | 
re De | (BE sere Wa 
CC 机 [mm | 加 Lm | 
图 3-12 “管理 站 点 ”对 话 框 图 3-13 “文件 ”面板 
友 高 手 支 招 女 


站 点 定义 不 好 ， 其 结构 将 会 变 得 混乱 ， 给 以 后 的 维护 造成 很 大 的 困难 ， 大 家 千 万 不 要 小 看 了 它 ， 这 些 
工作 在 整个 网 站 建设 中 是 相当 重要 的 。 


3.3.2 小 实例 一 一 管理 本 地 站 点 


在 Dreamweaver CC 中 ， 可 以 对 本 地 站 点 进行 管理 ， 如 打开 、 编 辑 、 删 除 和 复制 站 点 等 。 

当 运 行 Dreamweaver CC 后 ， 系 统 会 自动 打开 上 次 退出 Dreamweaver CC 时 编辑 的 站 点 。 

如 果 想 打开 另外 一 个 站 点 , 在 “文件 ”面板 左边 的 下 拉 列 表 框 中 将 会 显示 已 定义 的 所 有 站 点 ， 
如 图 3-14 所 示 。 在 下 拉 列 表 框 中 选择 需要 打开 的 站 点 ， 即 可 打开 已 定义 的 站 点 。 
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图 3-14 打开 站 点 
创建 站 点 后 ， 可 以 对 站 点 进行 编辑 ， 执 行 “ 站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 
话 框 ， 在 对 话 框 中 单 击 “ 编 辑 当前 选 定 的 站 点 ”按钮 ， 如 图 3-15 所 示 。 即 可 弹出 “站 点 设置 对 象 
效果 ”对 话 框 ， 在 “高 级 设置 ”选项 卡 中 可 以 编辑 站 点 的 相关 信息 ， 如 图 3-16 所 示 。 


一 ms ET |] 自 
上 aE 
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Contra 
二 村 口 GE 大 小 Bi 
Ferrite TM 
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| [mm | | 
图 3-15 “管理 站 点 ”对 话 框 3-16 “站 点 设置 对 象 效 果 ” 对 话 框 


友 知识 要 点 女 


可 以 创建 多 个 站 点 ， 它 们 都 将 显示 在 “管理 站 点 ”窗口 左 侧 的 站 点 列表 框 中 。 想 要 在 多 个 站 点 中 进行 
切换 ， 只 需 打 开 “ 管 理 站 点 ”， 选 中 要 打开 的 站 点 ， 单 击 下 面 的 “完成 ”按钮 即 可 。 


编辑 完毕 后 ， 单 击 “ 确 定 ”按钮 ， 返 回 到 “管理 站 点 ”对 话 框 ， 单 击 “ 完 成 ”按钮 ， 即 可 完 
成 站 点 的 编辑 。 

如 果 不 再 需要 站 点 ， 可 以 将 其 从 站 点 列表 中 删除 ， 执行“ 站 点 ”| “管理 站 点 ”命令 ， 弹 出 “ 管 
理 站 点 ”对 话 框 ， 在 对 话 框 内 选中 要 删除 的 站 点 ， 单 击 “ 删 除 当前 选 定 的 站 点 ”按钮 ， 如 图 3-17 
所 示 。 弹出 Dreamweaver 提示 对 话 框 , 询问 用 户 是 否 要 删除 本 地 站 点 , 如 图 3-18 所 示 。 单 击 “ 是 ” 
按钮 ， 即 可 将 本 地 站 点 删除 。 


41 


( \ IT 


| 
六 i 
Dreamweaver 
| 您 不 能 撤消 该 动作 。 
J 上。 押 W 防 中 的 站 点 中 ? 
Es 
nem | [| [ee 
ES ee 
图 3-17 “管理 站 点 ”对 话 框 图 3-18 ”Dreamweaver 提示 对 话 框 
友 知识 要 点 友 


该 操作 实际 上 只 是 删除 了 Dreamweaver 同 该 站 点 之 间 的 关系 ， 但 是 实际 本 地 站 点 内 容 ， 包 括 文件 来 
和 文档 等 ， 仍 然 保 存在 磁 副 相应 的 位 置 ， 可 以 重新 创建 指向 其 位 置 的 新 站 点 ， 重 新 对 其 进行 管理 。 


执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 选中 要 复制 的 站 点 ， 
单 击 “ 复 制 当前 选 定 的 站 点 ”按钮 ， 如 图 3-19 所 示 ， 即 可 将 该 站 点 复制 。 新 复制 出 的 站 点 名 称 会 出 
现在 “管理 站 点 ”对 话 框 的 站 点 列表 中 ， 如 图 3-20 所 示 。 单 击 “完成 ”按钮 ， 完 成 对 站 点 的 复制 。 


3-19 选择 “复制 当前 选 定 的 站 点 ”按钮 图 3-20 复制 站 点 


3.4 插入 文本 


在 Dreamweaver 中 可 以 通过 直接 输入 、 复 制 和 粘贴 的 方法 将 文本 插入 到 文档 中 。 
3.4.1 小 实例 一 一 插入 普通 文本 
文本 是 基本 的 信息 载体 ， 是 网 页 中 的 基本 元 素 ， 浏 览 网 页 时 ， 获 取信 息 最 直接 、 最 直观 的 方 


式 就 是 通过 文本 。 在 Dreamweaver 中 添加 文本 的 方法 非常 简单 , 如 图 3-21 所 示 是 添加 文本 后 的 效 
果 ， 有 具体 操作 步骤 如 下 。 
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第 3 章 ， 快速 掌握 Dreamweaver 设计 基本 网 页 


原始 文件 : 原始 文件 /03/3.4.1/index.htm 
最 终 文 件 : 最终 文 件 /03/3.4.1/index1 .htm 


Nt TR TE 
nN 


图 3-21 添加 文本 效果 
步 又 014 打开 网 页 文档 ， 如 图 3-22 所 示 。 


图 3-22 ”打开 网 页 文档 
步 又 024 将 光标 置 于 要 输入 文本 的 位 置 ， 输 入 文本 ， 如 图 3-23 所 示 。 


西 - 国 OIerz] 


lm 
= 和 人 


Ge ale or AD A IAD Gh eS EL FES 


3-23 输入 文本 
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步 枝 034 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-21 所 示 。 

六 高 手 支 招 交 

插入 普通 文本 还 有 一 种 方法 ， 先 从 其 他 应 用 程序 中 复制 ， 然 后 粘贴 到 Dreamweaver 文档 窗口 中 。 在 
添加 文本 时 还 要 注意 根据 用 户 语言 的 不 同 , 选择 不 同 的 文本 编码 方式 , 错误 的 文本 编码 方式 将 使 中 文 
字 显 示 为 乱码 。 


3.4.2 小 实例 一 一 设置 文本 属性 


如 果 网 页 中 的 文本 样式 太 单调 ， 会 大 大 降低 网 页 的 外 观 效果 ， 通 过 对 文本 格式 的 设置 可 使 文 
本 变 得 美观 ， 让 网 页 更 具 魅 力 。 选 中 需要 设置 格式 的 文本 ， 然 后 在 “属性 ”面板 中 可 以 设置 文本 
的 具体 属性 ， 效 果 如 图 3-24 所 示 。 


ES FN At ME it RRR 


图 3-24 设置 文本 属性 效果 
原始 文件 : 原始 文件 /03/3.4.2/index.htm 
最 终 文件 ， 最 终 文件 /03/3.4.2/indexl1 .htm 
步骤 014 打开 网 页 文档 ， 选 中 文字 ， 执 行 “窗口 ” |“ 属性” 命令， 打开 “属性 ”面板 ， 单 击 “大 
小 ”文本 框 右边 的 按钮 ， 在 弹出 的 菜单 中 选择 字体 “大 小 ”为 “12 像素 ”， 如 图 3-25 
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| 


5 [ 
TEXT 
ga 


| 
单元 格 人 ”| 不 十 行 科 了 靖 及 生 多 厂 
了 | 高 中 标 要 中 
图 3-25 设置 文字 的 大 小 
步骤 024 在 “属性 ”面板 的 “字体 ”下 拉 列 表 中 选择 “管理 字体 ”选项 ， 如 图 3-26 所 示 。 
Dw Be. Eh olel x] 


HN Ral EEV) END garM) WtiO) 二 SO sls BOW me(HD 


a A ti 
和 


a 
i 


Ro NL CD NL cr HD Gl SD 


Er 可 
[mC 区 | 


rm 
图 3-26 选择 字体 
步骤 034 在 对 话 框 中 选择 “ 自 定义 字体 堆栈 ”选项 卡 ， 选 择 “ 可 用 字体 ”选项 中 选择 要 添加 的 
字体 ， 单 击 医 呈 按 钮 添加 到 左 侧 的 “选择 的 字体 : ”列表 框 中 ， 在 “字体 列表 ” 框 中 
也 会 显示 新 添加 的 字体 ， 如 图 3-27 所 示 。 重复 以 上 操作 即 可 添加 多 种 字体 ， 若 要 取消 
已 添加 的 字体 ， 可 以 选中 该 字体 单 
步 又 044 完成 一 个 字体 样式 的 编 图 后 ， 单 击 国 访 全 可 进行 下 一 个 样式 的 编辑 。 若 要 删除 某 个 已 
经 编辑 的 字体 样式 ， 可 选中 该 样式 后 单 击 国 按钮 。 
步 最 054 完成 字体 样式 的 编辑 后 ， 单 击 “ 完 成 ”按钮 并 关闭 该 对 话 框 。 在 文档 中 可 以 看 到 文字 
应 用 的 字体 样式 ， 如 图 3-28 所 示 。 


( \ IT 


Dw Bm- Eh olel x] 


> 天下 > 公分 Ba 


a 和 et mr 
,ee | 国 sam 
和 


| 
人 二 用 旺 < 和 扩 全 和 革 、 委 和 着 全 和 


| MO Raee 
| 


图 3-27 “管理 字体 ”对 话 框 图 3-28 ”设置 字体 
步骤 06 人 单 击 “颜色 ”按钮 ， 在 弹出 的 颜色 框 中 设置 文本 颜色 为 “#539301”， 如 图 3-29 所 示 。 
Dw BE. Ga OL-lol xj 


a I 


BM LE 

[5 站 回 忆 

七 单元 格 。 溃 巴 | 星人 “] 寓 四 和 由 了 了 1 所 癌 
一 ox SHV  -]w 村 是 四 


图 3-29 设置 文本 颜色 
友 提示 六 


如 果 调 色 板 中 的 颜色 不 能 满足 需要 时 ， 单 击 瑟 按钮 ， 弹 出“ 颜色” 对话 框 ， 在 对 话 框 中 选择 需要 的 颜 
色 即 可 。 


3.4.3 小 实例 一 一 插入 特殊 字符 


制作 网 页 时 ， 有 时 要 输入 一 些 键盘 上 没有 的 特殊 字符 ， 如 日 元 符号 、 注 册 商 标 等 ， 这 就 需要 
使 用 Dreamweaver 的 字符 功能 。 下 面 通过 版 权 符号 的 插入 讲述 字符 的 添加 ， 如 图 3-30 所 示 , 具体 
操作 步骤 如 下 。 
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图 3-30 插入 版 权 字符 效果 


原始 文件 ;原始 文件 /03/3.4.3/index.htm 
最 终 文件 ， 最 终 文件 /03/3.4.1/indexl1 .htm 


步骤 014 打开 网 页 文档 ， 将 光标 置 于 要 插入 字符 的 位 置 ， 如 图 3-31 所 示 。 


EDOCICz 


一 
及， 和、 生生、 直下、 工厂 


Ms, amma 


六 林芝 和 站 工 各 工业 人 有 站 和 和， 
入 也 之 所， 不 业 人 本 从 基 本 备 ， 订 朋 和 本 全， 人 


中 
PT CE 


图 3-31 打开 网 页 文档 
步骤 02 执行 “插入 ”| “字符 ”| “版权 ”命令 ， 如 图 3-32 所 示 。 


图 3-32 执行 “版 权 ” 命 令 
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下 天 03 1 执行 命令 后 就 可 插入 版 权 字符 ， 如 图 3-33 所 示 . 


i | 国 | 二 :二 
as, ao 


直人 本 专业 天 志明 下水 基 区 本 工程， 工业 二 加 大 肌 空 所 轩 外 本 梳 备 ,7 
洛 工 各 空气 扑 区 大 、 不 氏 久 此 让 诬 公 共 纪 二流 各 这 宇 所 引 区 冰雪 


太 提示 女 
插入 版 权 字符 的 方法 还 有 以 下 两 种 : 


。 单 击 “常用 ”插入 栏 中 的 字符 | 蚂 - 按 钮 右 侧 的 小 三 角形 ， 在 弹出 的 菜单 中 选择 要 插入 的 版 权 符号 。 
。 执行 “插入 ”|“ 字 符 ”|“ 其 他 字符 ”命令 ， 弹 出 “插入 其 他 字符 ”对 话 框 ， 在 对 话 框 中 选择 版 权 
符号 ， 单 击 “ 确 定 ”按钮 ， 也 可 以 插入 版 权 字符 。 


步骤 044 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-30 所 示 。 


3.5 ”使 用 列表 


在 网 页 编辑 中 ， 有 时 会 使 用 列表 ， 例 如 ， 包 含 层次 关系 、 并 列 关系 的 标题 都 可 以 制作 成 列表 
形式 ， 这 样 有 利于 访问 者 理解 网 页 内 容 。 列 表 包括 项 目 列表 和 编号 列表 ， 下 面 分 别 进行 介绍 。 
3.5.1 小 实例 一 一 插入 项 目 列表 


项 目 列表 又 称 无 序列 表 ， 这 种 列表 的 项 目 之 间 没有 先后 顺序 。 项 目 列表 前 面 一 般 用 项 目 符号 
作为 前 导 字符 ， 如 图 3-34 所 示 是 创建 项 目 列表 效果 ， 有 具体 操作 步骤 如 下 。 
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图 3-34 ”创建 项 目 列表 效果 


原始 文件 ， 原 始 文 件 /03/3.5.1/index.htm 
最 终 文件 : 最 终 文件 /03/3.5.1/index1.htm 


步 又 014 打开 网 页 文档 ， 将 光标 置 于 要 创建 项 目 列表 的 位 置 ， 如 图 3-35 所 示 。 


| 


图 3-35 打开 网 页 文档 


步骤 024 执行 “格式 ”|“ 列 表 ”|“ 项 目 列表 ”命令 ， 如 图 3-36 所 示 。 


二 | 
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x i my 
a 0 Van om aramid oy 二 硬 一 E22 


3-36 执行 “项 目 列表 ”命令 
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步 又 034 选择 命令 后 ， 即 可 创建 项 目 列表 ， 如 图 3-37 所 示 。 


Dw 机. Olel x 


花 固 主 要 生产 经 营 的 品种 有 ， 
[Em | 这 入 类 ,a bm 35、 二 和 


彩 叶 亚 。/ 丙 相关 所 六 南 、 小 了 本 1 


花 玲 木 夫 。F 迁 .3 , 铅 | 公 、 向 | 地 .到 尼 ， 机 作 、 当 从 、 和 下、 


a Ilya oni e007 | 
E23 


图 3-37 创建 项 目 列表 
太 提示 友 


单 击 “ 属 性 ”面板 中 的 “项 目 列表 ”按钮 时 ， 也 可 以 创建 项 目 列表 ; 或 者 执行 “插入 ”| “结构 ”| 
“项 目 列表 ”命令 ， 也 可 以 创建 项 目 列表 。 


步 最 044 同步 骤 2~3 插入 其 他 的 项 目 列表 ， 如 图 3-38 所 示 。 


Dw 画 - th ol x] 
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果树 类 ， 和 村 ,全 时- 开 村 、 志 本! 

窑 可 类 ， 尖 区、 和 4 帮 、 石 1、 Wt、 于 
乔木 类 ， 硬 、 全 才 、 昌 结交 柑 、 扩 寺 、 半 机 、 百 机 
| 党 肥 类 ，gE、 去 二. 和 eu 右 


1 ee] 6 
a a 四 硬 号 sav 


3-38 插入 其 他 的 项 目 列表 
步骤 05 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-34 所 示 。 


3.5.2 ”使 用 编号 列表 


当 网 页 内 的 文本 需要 按 序 排列 时 ， 就 应 该 使 用 编号 列表 。 编 号 列表 的 项 目 符号 可 以 在 阿拉 伯 
数字 、 罗 马 数 字 和 英文 字母 中 做 出 选择 。 如 图 3-39 所 示 是 创建 编号 列表 效果 , 具体 操作 步骤 如 下 。 


原始 文件 : 原始 文件 /03/3.5.2/index.html 
最 终 文件 :最终 文件 /03/3.5.2/index1.html 
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生产 经 营 的 品种 有 
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图 3-39 创建 编号 列表 效果 
步骤 014 打开 网 页 文档 ， 将 光标 置 于 要 创建 编号 列表 的 位 置 ， 如 图 3-40 所 示 。 
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图 3-40 打开 网 页 文档 
步骤 024 执行 “格式 ”|“ 列 表 ”|“ 编 号 列表 ”命令 ， 如 图 3-41 所 示 。 


Dw Olle 
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3-41 执行 “编号 列表 ”命令 
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步骤 034 选择 命令 后 ， 即 可 创建 编号 列表 ， 如 图 3-42 所 示 。 


en 主要 生产 经 营 的 品种 有 


上 | 寅 毕 赤 ， 司 坝 、 北 京 村 至 本 基地 1 


彩 叶 类 ，i 阁 杨 ， 小 时 备 硬 、 友 由 ,小字 


花 洁 木 类 ， 月 所 , 沪 亲 、 妆 叶 向 、 Ft 玫 


坚 则 尖 :人 村， 人们 、 考 当时 ,去 村， 区 


太 提示 女 


单 击 “ 属 性 ”面板 中 的 “编号 列表 ”按钮 国 ， 也 可 以 创建 编号 列表 ; 或 者 执行 “插入 ”|“ 结 构 ”|“ 纺 
号 列表 ”命令 ， 也 可 以 创建 编号 列表 。 


步 又 044 重复 步骤 2~3 插入 其 他 的 编号 列表 ， 如 图 3-43 所 示 。 


CIT ET ET 全 和 


3-43 ”插入 其 他 的 编号 列表 
步骤 054M 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-39 所 示 。 


3.6 ”在 网 页 中 插入 文件 头 部 内 容 


文件 头 标签 也 就 是 通常 说 的 Meta 标签 文件 头 标签 在 网 页 中 是 看 不 到 的 ， 它 包含 在 网 页 中 
<head>.….</head> 标 签 之 间 。 所 有 包含 在 该 标签 之 间 的 内 容 在 网 页 中 都 是 不 可 见 的 。 
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文件 头 标签 主要 包括 标题 、META、 关 键 字 和 说 明 ， 下 面 分 别 进行 介绍 常用 的 文件 头 标签 的 
使 用 。 


3.6.1 插入 Meta 信息 


Meta 对 象 常 用 于 插入 一 些 为 Web 服务 器 提供 选项 的 标记 符 , 方法 是 通过 http-equiv 属性 和 其 
他 各 种 在 Web 页 面 中 包括 的 、 不 会 使 浏览 者 看 到 的 数据 。 设 置 Meta 的 具体 操作 步骤 如 下 。 


步骤 01 执行 “插入 ”| Head (H) | Meta 命令 ， 弹 出 META 对 话 框 ， 如 图 3-44 所 示 。 


图 3-44 META 对 话 框 
@ 在 “属性 ”下 拉 列 表 中 可 以 选择 “名 称 ” 或 “http-equiv” 选 项 ， 指 定 Meta 标签 是 否 包含 
有 关 页 面 的 描述 信息 或 http 标题 信息 。 
@ 在 “ 值 ” 文本 框 中 指定 在 该 标签 中 提供 的 信息 类 型 。 
@ 在 “内 容 ” 文 本 框 中 输入 实际 的 信息 。 


步 又 024 设置 完毕 后 ， 单 击 “ 确 定 ” 按 钮 即 可 。 
六 提示 女 


单 击 “ 常 用 ”插入 栏 中 的 按钮 Sa， 在 弹出 的 菜单 中 选择 META 选项 , 弹出 META 对 话 框 , 插入 Meta 
信息 。 


3.6.2 ”插入 关键 字 


关键 字 也 就 是 与 网 页 的 主题 内 容 相 关 的 简短 而 有 代表 性 的 词汇 ， 这 是 给 网 络 中 的 搜索 引擎 准 
备 的 。 关 键 字 一 般 要 尽 可 能 地 概括 网 页 内 容 ， 这 样 浏览 者 只 要 输入 很 少 的 关键 字 ， 就 能 最 大 程度 
的 搜索 网 页 。 插 入 关键 字 的 具体 操作 步骤 如 下 。 
步骤 01 执行 “插入 ”| Head (H ) |“ 关 键 字 ” 命 令 ， 弹 出 “关键 字 ” 对 话 框 ， 如 图 3-45 所 示 。 
步骤 024 在 “关键 字 ” 文 本 框 中 输入 一 些 值 ， 单 击 “ 确 定 ”按钮 即 可 。 

EE PT 


CC 机] 
CR] 
- 


图 3-45 “关键 字 ” 对 话 框 


( s IT 


太 提示 大 
单 击 “ 常 用 ”插入 栏 中 的 按钮 2s， 在 弹出 的 菜单 中 选择 “关键 字 ” 选 项 ， 弹 出 “关键 字 ” 对 话 杠 ， 
插入 关键 字 。 

3.6.3 插入 说 明 


插入 说 明 的 具体 操作 步骤 如 下 。 


步骤 01 执行 “插入 ”| Head (H) |“ 说明” 命令， 弹出“ 说明” 对话 框 ， 如 图 3-46 所 示 。 
步骤 024 在 “说 明 ” 文 本 框 中 输入 一 些 值 ， 单 击 “ 确 定 ”按钮 即 可 。 


本 7" 
订 CJ] 


图 3-46 “说明” 对话 框 
友 提示 友 


单 击 “ 常 用 ”插入 栏 中 的 按钮 号 %， 在 弹出 的 菜单 中 选择 “说 明 ” 选 项 ， 弹 出 “说 明 ” 对 话 框 ， 插 入 
说 明 。 


3.7 ”插入 其 他 对 象 


用 户 可 以 在 文本 的 字符 与 行 之 间 插 入 额外 的 空格 ， 还 可 以 插入 字符 和 水 平 线 等 。 
3.7.1 小 实例 一 一 插入 日 期 


当 需 要 在 网 页 的 指定 位 置 插入 准确 的 日 期 信息 时 ， 可 以 执行 “插入 ”|“ 日 期 ” 命令 来 实现 。 
添加 日 期 的 好 处 是 既 可 以 选用 不 同日 期 格式 ， 规 范 而 准确 地 表达 日 期 ， 同 时 该 命令 还 可 以 设置 自 
动 更 新 ， 让 网 页 显示 当前 最 新 的 日 期 和 时 间 。 

下 面 通过 实例 讲述 如 何在 网 页 中 插入 日 期 效果 , 插入 日 期 的 效果 如 图 3-47 所 示 ，, 具体 操作 步 
骤 如 下 。 
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ae 0 ES ET | 
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图 3-47 插入 日 期 效果 


原始 文件 ， 原 始 文件 /03/3.7.1/index.htm 
最 终 文件 ， 最 终 文件 /03/3.7.1/index1 .htm 


步骤 014 打开 网 页 文档 ， 如 图 3-48 所 示 。 


=. CH Ol-lol x] 


Dw 
HH) ROD EBV EA We(M) lO) Hs(O Sats) ECW wet 
dex x 到 
基因 | 白 分 二 | HR 总。 人 是 旭 _| 三 
"| 二 下 
从 
及 
国 cs srs 


1 请 DEF 首 、 证， 证 和 村 1 和 放 往 要 3 司 ， 区 
人, 要 盏 下 世 有 ， 国 友基 


Dis» 


步骤 02 将 光标 置 于 要 插入 日 期 的 位 置 ， 执 行 “ 插 入 ”| “日期” 命令 ， 如 图 3-49 所 示 。 
步骤 034 选择 命令 后 ， 弹 出 “插入 日 期 ”对 话 框 ， 在 对 话 框 中 设置 相应 的 格式 ， 如 图 3-50 所 示 。 
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Dw Ei Ollelx 
md mars Ea EE tw 0) slO als BW RR 
Indexhem x 


Di 
| MSW 。 cnAhrshifny 


"| 
识 本 

EE 

四 | 国 <ssa 星期 格式: [星期 四 了 

日 期 格式 :74377 | 

全 3 月 T 虽 3 

|03/07/1974 [本 


图 3-49 执行 “日 期 ”命令 
在 “插入 日 期 ”对 话 框 中 主要 有 以 下 参数 。 


@ 星期 格式 : 设置 星期 的 格式 。 
@ 日 期 格式 : 设置 日 期 的 格式 。 
@ 
. 


时 间 格 式 : 设置 时 间 的 格式 。 

如 果 选 中 “储存 时 自动 更 新 ” 复 选 框 ， 则 每 次 保存 文档 都 会 自动 更 新 文档 中 日 期 。 
友 提示 六 
单 击 “ 常 用 ”插入 栏 中 的 “日 期 ”按钮 回 ， 弹 出 “插入 日 期 ”对 话 框 ， 也 可 以 插入 日 期 。 


步骤 044 单 击 “ 确 定 ” 按 钮 ， 插 入 日 期 ， 如 图 3-51 所 示 。 
步骤 054 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-47 所 示 。 


| DW xp mm sam SAD aM ero) siO zal) BOW Rm Ee- 


图 3-51 插入 日 期 


56 


第 3 章 a ee i 人 


3.7.2 小 实例 一 一 插入 水 平 线 


很 多 网 页 在 其 下 方 会 显示 一 条 水 平 线 ， 以 分 割 网 页 主题 内 容 和 底 端的 版 权 声明 等 。 根 据 设计 
需要 ， 也 可 以 在 网 页 任意 位 置 添加 水 平 线 ， 达 到 区 分 网 页 中 不 同 内 容 的 目的 。 下 面 通 过 实例 讲述 
在 网 页 中 插入 水 平 线 ， 效 果 如 图 3-52 所 示 ， 有 具体 操作 步骤 如 下 。 


aT 
ER 


图 3-52 ”插入 水 平 线 效果 


原始 文件 : 原始 文件 /03/3.7.2/index.htm 
最 终 文件 ， 最终 文件 /03/3.7.2/indexl.htm 


步骤 014 打开 网 页 文档 ， 将 光标 置 于 要 插入 水 平 线 的 位 置 ， 如 图 3-53 所 示 。 


Dw Bm. EB Ol=lol x 
ZA Wi SE MAID 人 邮品 sei Sats EOIW) ti 
iu x | 


人 BB | 大分 [如] 天 图 。 所 5: CE 


a 


图 cs ats 


本 月 新 有 三 和 
运 消 上 海 .为 隐 于 让 、 填 海 , 广 州 , 放 


图 3-53 打开 网 页 文档 
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网 页 设计 与 网 站 建设 全 攻略 


步骤 024 执行 “插入 ”| “水平线 ”命令 ， 如 图 3-54 所 示 。 


| 


图 3-54 插入 水 平 线 
步骤 034 选择 命令 后 ， 即 可 插入 水 平 线 ， 如 图 3-55 所 示 。 


Dw 
HR WR ER ND WM mol 和 SG ms) BOW 


ee 0 


ET 
|e. 


从、 nia mre re 


| .ama am、 


图 3-55 ”插入 水 平 线 效果 


步 野 044 选中 插入 的 水 平 线 ， 选 择 菜单 中 的 “窗口 ”|“ 属 性 ”命令 ， 打 开 “ 属 性 ”面板 ， 可 以 
设置 水 平 线 的 属性 ， 如 图 3-56 所 示 。 


Dw =-. ED Oo 
Za aD HEV SAN ARM FO) He(O Way DCM we 


née nt 2 


EE _ 地 EE 


ol x]| 


semitgnahha miter, En anragaemaptmgd5. FL | A 
和 和 二 全 风 由 一 贞 人 3 扣 撤 术 后 月 贡 请 有 三 大 祝 刺 好 系列 ，300 个 品 称 。 产 品 这 二 市 基 所 ， 臣 宪 全 同治 地 
fume, ra、 

| 


此 于 于、 EN 且 时 让 和 信和 尖 和 ET | 
工人 和 的 半 训 ， 术 的 时 于 季 皇 二， 二 本 下 姓 全 流年 适 ; 
人 EE 社 N，U. 避 二 克 品 ， 二 村， 到 有 于， 党 


TT TT TT TT 昌国 se in。 


3-56 “设置 水 平 线 属性 ”面板 
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水 平 线 属 性 面板 中 主要 有 以 下 参数 。 

@ 宽 : 在 其 文本 框 中 输入 水 平 线 的 宽度 值 ， 默 认 单位 是 像素 ， 也 可 以 选择 百分比 。 
高 : 在 其 文本 框 中 输入 水 平 线 的 高 度 值 ， 它 的 单位 只 能 是 像素 。 

@ 对 齐 : 在 其 下 拉 列 表 中 有 4 种 对 齐 方式 ， 分 别 是 “默认 ”、“ 左 对 齐 ”" “居中 对 齐 ” 和 “ 右 
对 齐 ”， 表 示 水 平 线 在 表格 内 的 不 同 对 齐 方式 ， 可 根据 需要 进行 选择 。 

@ 阴影 : 勾 选 此 复 选 框 ， 则 水 平 线 将 产生 阴影 效果 。 


太 提示 女 


在 “属性 ”面板 中 并 没有 提供 关于 水 平 线 颜色 的 设置 选项 ， 如 果 需 要 改变 水 平 线 的 颜色 ,在 源 代码 中 
更 改 (hrcolor=“ 对 应 颜色 的 代码 ”) 即 可 。 


步骤 054M 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-52 所 示 。 


3.8 ”实战 一 一 创建 基本 文本 网 页 


本 章 主 要 讲述 了 创建 网 页 文本 的 基本 知识 ， 下 面 通过 实例 讲述 如 何 创 建 基本 文本 网 页 的 效 
果 ， 创 建 基本 文本 网 页 的 效果 如 图 3-57 所 示 ， 有 具体 操作 步骤 如 下 。 


图 3-57 创建 基本 文本 网 页 效果 


原始 文件 ， 原 始 文 件 /03/ 实 战 2/index.htm 
最 终 文件 ， 最 终 文件 /03/ 实 战 2/index1 .htm 


步骤 014 打开 网 页 文档 ， 如 图 3-58 所 示 。 
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图 3-58 ”打开 网 页 文档 


步骤 024 将 光标 置 于 要 输入 文字 的 位 置 ， 输 入 文字 ， 如 图 3-59 所 示 。 
Dw 动 - Ch ol-lol x] 


HN PRE] EV AD WlM) tO) 8[O 站 可 5 PCW) Nami 


| 


nn 
DT 


LL 


3-59 输入 文字 


步骤 034 将 光标 置 于 文字 开头 ， 按 住 鼠 标的 左 键 向 下 拖 动 至 文字 结尾 ， 选 中 所 有 的 文字 ， 在 “ 属 
性 ”面板 中 单 击 “ 大 小 ”右边 的 文本 框 ， 在 弹出 的 菜单 中 选择 文字 的 大 小 ， 如 图 3-60 
所 示 。 

步骤 044 单 击 “ 确 定 ” 按钮， 设置 文本 的 大 小 ， 单 击 “ 文 本 颜色 ”按钮 ， 在 打开 的 调 色 板 中 设 
置 文本 的 颜色 为 “#E68C11”， 如 图 3-61 所 示 。 


60 


第 3 章 ， 快速 掌握 Dreamweaver 设计 基本 网 页 全) 
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3-60 设置 文字 的 大 小 
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图 3-61 设置 文本 颜色 
步 最 054 在 “属性 ”面板 中 单 击 “ 字 体 ”右边 的 文本 框 ， 在 弹出 的 列表 中 选择 字体 样式 ， 如 


图 
3-62 所 示 。 
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图 3-62 ”选择 字体 样式 
步 最 064 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-57 所 示 。 
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多 媒体 网 页 


本 章 导 读 


图 像 和 多 媒体 是 网 页 中 不 可 或 缺 的 组 成 部 分 , 恰当 地 使 用 图 像 和 多 媒体 ， 可 以 使 网 站 充满 
生命 力 与 说 服 力 ,吸引 更 多 的 浏览 者 ， 加 深 他 们 欣赏 网 站 的 意愿 。 图 像 和 多 媒体 在 网 页 中 具有 
画龙点睛 的 作用 ， 它 能 装饰 网 页 ， 表 达 个 人 的 情调 和 风格 。 

本 章 主要 介绍 在 网 页 中 插入 图 像 、 插 入 和 编辑 多 媒体 对 象 ， 如 Java Applet 小 程序 、Flash 
影片 或 视频 对 象 以 及 网 页 链接 的 创建 等 。 通 过 本 章 的 学 习 ， 可 以 创建 丰富 多 彩 的 图 像 、 多 媒体 
和 网 页 链接 。 


在 网 页 中 插入 图 像 
掌握 网 页 图 像 的 应 用 
掌握 插入 声音 
掌握 插入 视频 
插入 其 他 媒体 文件 
网 页 链接 的 创建 


实例 展示 


WELCOME TO 


一 名 


插入 图 像 添加 背景 音乐 
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插入 Flash 图 文 混 排 网 页 


4.1 在 网 页 中 插入 图 像 


在 使 用 图 像 前 ， 一 定 要 有 目的 地 选择 图 像 ， 最 好 运用 图 像 处 理 软件 美化 一 下 图 像 ， 否 则 插入 
的 图 像 可 能 不 美观 ， 会 显得 非常 死板 。 


4.1.1 网 页 中 图 像 的 常见 格式 


网 页 中 图 像 的 格式 通常 有 3 种 ， 即 GIF、JPEG 和 PNG。 目前 GIF 和 JPEG 文件 格式 的 支持 
情况 最 好 , 大 多 数 浏览 器 都 可 以 查看 这 两 种 格式 的 文件 。 由 于 PNG 文件 具有 较 大 的 灵活 性 并 且 文 
件 较 小 ， 所 以 它 对 于 几乎 任何 类 型 的 网 页 图 像 都 是 最 适合 的 ， 但 是 Microsoft Internet Explorer 和 
Netscape Navigator 只 能 部 分 支持 PNG 图 像 的 显示 。 建 议 使 用 GIF 或 JPEG 格式 以 满足 更 多 人 的 


1. GIF 格式 


GIF 是 英文 单词 Graphic Interchange Format 的 缩写 ， 即 图 像 交 换 格式 ， 文 件 最 多 使 用 256 种 
颜色 ， 最 适合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 例 如 导航 条 、 按 钮 、 图 标 、 徽 标 等 。 

GIF 格式 的 最 大 优点 就 是 制作 动态 图 像 ， 可 以 将 数 张 静 态 文件 作为 动画 帧 串联 起 来 ， 转 换 成 
一 张 动画 文件 。 

GIF 格式 的 另 一 优点 就 是 可 以 将 图 像 以 交错 的 方式 在 网 页 中 呈现 。 所 谓 交 错 显 示 ， 就 是 当 图 
像 尚未 下 载 完 成 时 ， 浏 览 器 会 先 以 马赛 克 的 形式 将 图 像 慢 慢 显示 ， 让 浏览 者 可 以 大 略 猜 出 下 载 图 
像 的 雏形 。 
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2. JPEG 格式 


JPEG 是 英文 单词 Joint Photographic Experts Group 的 缩写 ， 它 是 一 种 图 像 压 缩 格 式 ， 文 件 格 
式 是 用 于 摄影 或 连续 色调 图 像 的 高 级 格式 ,这 是 因为 了 PEG 文件 可 以 包含 数 百 万 种 颜色 . 随 着 JPEG 
文件 品质 的 提高 ， 文 件 的 大 小 和 下 载 时 间 也 会 随 之 增加 。 通 常 可 以 通过 压缩 JPEG 文件 在 图 像 品 
质 和 文件 大 小 之 间 达 到 良好 的 平衡 。 

JPEG 格式 是 一 种 压缩 格式 ， 专 门 用 于 不 含 大 色 块 的 图 像 。JPEG 的 图 像 有 一 定 的 失真 度 ， 但 
是 在 正常 的 损失 下 肉眼 分 辨 不 出 JPEG 和 GIF 图 像 的 区 别 ， 而 JPEG 文件 只 有 GIF 文件 的 1/4 倍 

大 小 。JPEG 格式 对 图 标 之 类 的 含 大 色 块 的 图 像 不 是 很 有 效 ， 而 且 不 支持 透明 图 、 动 态 图 ， 但 它 

能 够 保留 全 真 的 调 色 板 格式 。 如 果 图 像 需 要 全 彩 模 式 才能 表现 效果 ，JPEG 就 是 最 佳 的 选择 。 

3. PNG 格式 

PNG 是 英文 单词 Portable Network Graphic 的 缩写 ， 即 便携 网 络 图 像 ， 是 一 种 奉 代 GIF 格式 
的 无 专利 权限 制 的 格式 ， 它 包括 对 索引 色 、 灰 度 、 真 彩色 图 像 以 及 alpha 通道 透明 的 支持 。PNG 
是 Fireworks 固有 的 文件 格式 。PNG 文件 可 保留 所 有 原始 层 、 矢 量 、 颜 色 和 效果 信息 ， 并 且 在 任 
何 时 候 所 有 元 素 都 是 可 以 完全 编辑 的 。 文 件 必须 具有 .png 扩展 名 才能 被 Dreamweaver 识别 为 PNG 
文件 。 


4.1.2 小 实例 一 一 插入 图 像 


图 像 是 网 页 构成 中 最 重要 的 元 素 之 一 , 美观 的 图 像 会 为 网 站 增添 生命 力 , 同时 也 加 深 对 网 
站 风格 的 印象 。 下 面 通过 如 图 4-1 所 示 的 实例 讲述 在 网 页 中 插入 图 像 ， 具 体操 作 步 又 如 下 。 


图 4-1 插入 图 像 效 果 
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原始 文件 : 原始 文件 /04/4.1.2/index.htm 
最 终 文件 : 最 终 文件 /04/4.1.2/index1.htm 
步 又 014 打开 网 页 文档 ， 如 图 4-2 所 示 。 


Dw 
ZI Sat] EW END WM) lO) SH as) OW) sed) 


计 - 国 @ -ol x 


ae x 


ED he ee ee 了 | 下 天 一 
从 机 | 白 分 | 讼 ++ | 加 8 本 到。 基本 验 1 
-| 及 
EEC TD 和 和 
| 图 cs aas 


aa I 


本 是 下 以 和 从 认 大 ， 家 六 技 相 研 各 ， 记 BB 和 鞍 ， 宇 上 全 于 09 训 。 和 区 二 轨 为 


图 4-2 打开 网 页 文档 


六 提示 女 
如 果 选 中 的 文件 不 在 本 地 网 站 的 根 目录 下 , 则 弹出 选择 框 , 系统 要 求 用 户 复制 图 像 文件 到 本 地 网 站 的 
根 目录 ， 单 击 “ 是 ”， 此 时 会 弹出 “拷贝 文件 为 ”对 话 框 ， 让 用 户 选 择 文件 的 存放 位 置 ， 可 选择 根 目 
录 或 根 目 录 下 的 任何 文件 来， 这 里 建议 读者 新 建 一 个 名 称 为 images 的 文件 来， 今后 可 以 把 网 站 的 所 
有 图 像 都 放 入 到 该 文件 夹 中 。 

步骤 024 将 光标 置 于 插入 图 像 的 位 置 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ” 命令 ， 弹 出 “选择 图 像 

源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 images/tul.jpg， 如 图 4-3 所 示 。 

步骤 03M 单 击 “ 确 定 ”按钮 ， 插 入 图 像 ， 如 图 4-4 所 示 。 


EE OE 


SIN: mljpg ~ [ex Coit'ipgipre:p | 
EE 3 [3 


图 4-3 “选择 图 像 源 文件 ”对 话 框 
六 高 手 支 招 太 

单 击 “常用 ”插入 栏 中 的 加 ?按钮 ， 在 弹出 的 下 拉 莱 单 中 选择 加 按钮， 也 可 弹出 “选择 图 像 源 文件 ” 
对 话 框 ， 在 对 话 框 中 选择 需要 的 图 像 文件 。 


图 4-4 插入 图 像 


( s IT 


步 枝 044 选中 插入 的 图 像 ， 单 击 鼠 标 右键 在 弹出 的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ” 命 令 ， 
如 图 4-5 所 示 。 
步骤 05 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 4-1 所 示 。 


图 4-5 设置 图 像 对 齐 方式 
4.2 ”鼠标 经 过 图 像 


在 浏览 器 中 查看 网 页 时 ， 当 鼠标 指针 经 过 图 像 时， 该 图 像 就 会 变 成 另外 一 幅 图 像 ， 当 鼠标 


移 开 时 ， 该 图 像 又 会 变 回 原来 的 图 像 。 这 种 效果 在 Dreamweaver 中 可 以 非常 简便 地 做 出 来 。 
鼠标 未 经 过 图 像 时 的 效果 如 图 4-6 所 示 ， 当 鼠标 经 过 图 像 时 的 效果 如 图 4-7 所 示 ， 具 体操 
作 步 骤 如 下 。 


TITTTTTTETTTTTTETEEETT 


图 4-6 和 鼠标 未 经 过 图 像 时 的 效果 图 4-7 鼠标 经 过 图 像 时 的 效果 
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原始 文件 : 原始 文件 /04/4.2/index.htm 
最 终 文件 : 最 终 文件 /04/4.2/index1.htm 


步 桑 01 打开 网 页 文档 ， 如 图 4-8 所 示 。 
步骤 024 将 光标 置 于 插入 鼠标 经 过 图 像 的 位 置 ， 执 行 “插入 ”| “图像 ”|“ 和 鼠标 经 过 图 像 ” 命令 ， 
弹出 “插入 鼠标 经 过 图 像 ”对 话 框 ， 如 图 4.9 所 示 。 


要- 国 0 el 


图 4-9 “插入 鼠标 经 过 图 像 ” 对 话 框 

太 知识 要 点 六 

“插入 鼠标 经 过 图 像 ”对 话 框 中 可 以 进行 如 下 设置 

。 图 像 名 称 : 设置 这 个 滚动 图 像 的 名 称 。 

。 原始 图 像 : 滚动 图 像 的 原始 图 像 ， 在 其 后 的 文本 框 中 输入 此 原始 图 像 的 路 径 ， 或 单 击 “ 浏 览 ” 按 
钮 打开 “原始 图 像 ” 对 话 框 ， 在 “原始 图 像 ” 对 话 框 中 可 选择 图 像 。 

。 鼠标 经 过 图 像 : 用 来 设置 鼠标 经 过 图 像 时 ， 原 始 图 像 痊 换 成 的 图 像 。 

。 预 载 刀 标 经 过 图 像 : 选中 该 复 选 框 ， 网 页 打开 就 预 下 载 蔡 换 图 像 到 本 地 。 当 鼠标 经 过 图 像 时 ， 能 
迅速 地 切换 到 替换 图 像 ， 如 果 取 消 该 选项 ， 当 鼠标 经 过 该 图 像 时 才 下 载 蔡 换 图 像 ， 替 换 可 能 会 出 
现 不 连贯 的 现象 。 

e 替换 文本 : 用 来 设置 图 像 的 替换 文本 ， 当 图 像 不 显示 时 ， 显 示 这 个 替换 文本 。 

。 按 下 时 ， 前 往 的 URL: 用 来 设置 滚动 图 像 上 应 用 的 超 链接 。 

步骤 034 单 击 “ 原 始 图 像 ”文本 框 右边 的 “浏览 ”按钮 ， 在 弹出 的 “原始 图 像 : ”对 话 框 中 选 

择 相应 的 图 像 tuljpg， 如 图 4-10 所 示 ， 单 击 “确定 ”按钮 ， 添 加 到 对 话 框 。 
步骤 044M 单 击 “ 鼠 标 经 过 图 像 ”文本 框 右边 的 “浏览 ”按钮 ， 在 弹出 的 “鼠标 经 过 图 像 : ”对 
话 框 中 选择 相应 的 图 像 tu2.jpg， 如 图 4-11 所 示 。 
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图 4-10 “原始 图 像 :” 对 话 框 图 4-11 “鼠标 经 过 图 像 ; ”对 话 杠 


步骤 054 单 击 “ 确 定 ”按钮 ， 添 加 到 对 话 框 ， 如 图 4-12 所 示 。 
步骤 064 单 击 “确定 ”按钮 ， 插 入 鼠标 经 过 图 像 ， 如 图 4-13 所 示 。 


Dw 十 国 0Llolxj 


Bo 
GD 
- GE 
图 4-12 添加 到 对 话 框 图 4-13 插入 鼠标 经 过 图 像 


六 提示 女 


在 插入 鼠标 经 过 图 像 时 ， 如 果 不 为 该 图 像 设置 链接 ，Dreamweaver 将 在 HTML 源 代码 中 插入 一 个 空 
链接 # ， 该 链接 上 将 附加 鼠标 经 过 的 图 像 行 为 。 如 果 删 除 该 链接 ， 鼠 标 经 过 图 像 将 不 起 作用 。 


步 又 07 4 选中 插入 的 鼠标 经 过 图 像 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 
齐 ” 选 项 ， 如 图 4-14 所 示 。 

步 又 08 4 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 鼠 标 未 经 过 图 像 时 的 效果 如 图 4-6 所 示 ， 鼠 标 经 
过 图 像 时 的 效果 图 4-7 所 示 。 
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图 4-14 设置 对 齐 方式 


4.3 ”插入 声音 


在 网 页 中 可 以 添加 各 种 不 同 格式 的 声音 文件 , 但 在 加 入 声音 文件 之 前 要 考虑 用 途 、 文 件 大 小 、 
声音 品质 和 浏览 器 差别 等 因素 。 


4.3.1 关于 音频 文件 格式 


音频 格式 是 指 要 在 计算 机 内 播放 或 者 处 理 音频 文件 ， 是 对 声音 文件 进行 数 、 模 转换 的 过 程 。 
音频 格式 最 大 带宽 是 20KHz,， 速率 介 于 40~50KHz 之 间 , 采用 线性 脉冲 编码 调制 PCM， 每 一 量化 
步 长 都 具有 相等 的 长 度 。 

音频 文件 格式 常见 的 特点 有 ， 要 在 计算 机 内 播放 或 者 处 理 音频 文件 ， 也 就 是 要 对 声音 文件 进 
行 数 、 模 转换 ， 这 个 过 程 同 样 由 采样 和 量化 构成 ， 人 耳 所 能 听 到 的 声音 ， 最 低 的 频率 是 从 20Hz 
起 一 直到 最 高 频率 20KHZ,20KHz 以 上 人 耳 是 听 不 到 的 ,因此 音频 文件 格式 的 最 大 带宽 是 20KHz， 
故而 采样 速率 需要 介 于 40~50KHz 之 间 ， 而 且 对 每 个 样本 需要 更 多 的 量化 比特 数 。 音 频数 字 化 的 
标准 是 每 个 样本 16 位 -96dB 的 信 噪 比 ， 采 用 线性 脉冲 编码 调制 PCM， 每 一 量化 步 长 都 具有 相等 
的 长 度 。 在 音频 文件 的 制作 中 ， 正 是 采用 这 一 标准 。 

音频 格式 日 新 月 异 ， 常 见 的 音频 格式 包括 : CD 格式 、WAVE (*.WAV)、AIFF、AU、MP3、 
MIDI、WMA、RealAudio、VQF、OggVorbis、AAC、APE。 


4.3.2 ”小 实例 一 一 添加 背景 音乐 


通过 代码 提示 ， 可 以 在 代码 视图 中 插入 代码 。 在 输入 某 些 字符 时 ， 将 显示 一 个 列表 ， 列 出 完 
成 条 目 所 需要 的 选项 。 下 面 通过 代码 提示 讲述 背景 音乐 的 插入 ， 效 果 如 图 4-15 所 示 ， 具 体操 作 步 
又 如 下 。 


( IT 


图 4-15 插入 背景 音乐 效果 
原始 文件 : 原始 文件 /04/4.3.2/index.html 
最 终 文件 : 最 终 文件 /04/4.3.2/index1.html 
六 提示 女 
浏览 器 可 能 需要 某 种 附加 的 音频 支持 来 播放 声音 ,因此 ， 具 有 不 同 插件 的 许多 浏览 器 所 播放 声音 的 效 
果 通 常会 有 所 不 同 。 
步 又 014 打开 网 页 文档 ， 如 图 4-16 所 示 。 
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图 4-16 打开 网 页 文档 
步骤 024 切换 到 代码 视图 ， 在 代码 视图 中 找到 标签 <body>， 并 在 其 后 面 输入 “<” 以 显示 标签 列 
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表 ， 输 入 “<” 时 会 自动 弹出 一 个 列表 框 ， 向 下 滚动 该 列表 并 选中 标签 bgsound， 如 图 
4-17 所 示 。 


六 指点 迷津 六 


bgsound 标签 共有 5 个 属性 ， 其 中 balance 用 于 设置 音乐 的 左右 均衡 ，delay 用 于 设置 进行 播放 过 程 中 
的 延 时 ，loop 用 于 控制 循环 次 数 ，src 用 于 存放 音乐 文件 的 路 径 ，volume 用 于 调节 音量 。 
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4-17 选中 标签 bgsound 


步骤 03 双击 插入 该 标签 ， 如 果 该 标签 支持 属性 ， 则 按 空格 键 以 显示 该 标签 允许 的 属性 列表 ， 
从 中 选择 属性 src， 如 图 4-18 所 示 。 这 个 属性 用 来 设置 背景 音乐 文件 的 路 径 。 


Dw EE | 
文本 澳 (E] 全 看 Vi 车 NMD 扩 IM) 总 RD + AIS) CW) WH] 


TYPE htnt PUSLIC ™-//N3C) /DTD KHTML TO Transitional//EN" 
xh en ll /DTD/X! tional. dtd"> 


"images /INDEX.1pg” width="1283" height="953" /2c/zd 


4-18 选择 属性 src 


步骤 044 按 Enter 键 后 ， 出 现 “ 浏 览 ”字样 ， 单 击 以 弹出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 选择 
音乐 文件 ， 如 图 4-19 所 示 。 
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图 4-19 “选择 文件 ”对 话 框 


六 指点 迷津 六 


播放 背景 音乐 文件 容量 不 要 太 大 ， 和 否则 很 可 能 整个 网 页 都 浏览 完了 ， 声 音 却 还 没有 下 载 完 呢 。 在 背景 
音乐 格式 方面 ，mid 格式 是 最 好 的 选择 ， 它 不 仅 拥 有 不 错 的 音质 ， 最 关键 的 是 它 的 容量 非常 小 ， 一 般 
只 有 几 十 K。 


步骤 05 选择 音乐 文件 后 ， 单 击 “ 确 定 ”按钮 。 在 新 插入 的 代码 后 按 空格 键 ， 在 属性 列表 中 选 
择 属 性 loop， 如 图 4-20 所 示 。 
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图 4-20 选择 属性 loop 


步 又 064 出 现 “-1” 并 选中 。 在 最 后 的 属性 值 后 ， 为 该 标签 输入 “>”， 如 图 4-21 所 示 。 
步骤 07 公 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 4-15 所 示 。 
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图 4-21 输入 “>” 


4.4 ”插入 视频 


随 着 宽带 技术 的 发 展 和 推广 ， 出 现 了 许多 视频 网 站 。 越 来 越 多 的 人 选择 观看 在 线 视频 ， 同 时 
也 有 很 多 的 网 站 提供 在 线 视频 服务 。 


4.4.1 视频 的 文件 格式 


视频 文件 的 格式 非常 多 ， 常 见 的 有 MPEG、AVI、WMV、RM 和 MOYV 等 。 

MPEG (或 MPG) 是 一 种 压缩 比率 较 大 的 活动 图 像 和 声音 的 视频 压缩 标准 , 常见 的 VCD、SVCD、 
DVD 就 是 这 种 格式 。MPEG 文件 格式 是 运动 图 像 压 缩 算法 的 国际 标准 ， 它 采用 了 有 损 压 缩 方 法 减少 
运动 图 像 中 的 元 余 信 息 ， 把 后 续 图 像 中 和 前 面 图 像 有 元 余 的 部 分 去 除 ， 从 而 达到 压缩 的 目的 。 

AVI 是 一 种 Windows 操作 系统 使 用 的 多 媒体 文件 格式 ， 可 以 将 视频 和 音频 交织 在 一 起 ， 进 行 
同步 播放 。 这 种 视频 格式 的 优点 是 图 像 质量 好 ， 可 以 跨 多 个 平台 使 用 ， 其 缺点 是 体积 过 于 庞大 。 

WMYV 是 一 种 Windows 操作 系统 自 带 的 媒体 播放 器 Windows Media Player 所 使 用 的 多 媒体 格 
式 。 它 的 英文 全 称 为 Windows Media Video, 是 微软 推出 的 一 种 采用 独立 编码 方式 并 且 可 以 直接 在 
网 上 实时 观看 视频 节目 的 文件 压缩 格式 。WMYV 格式 的 主要 优点 包括 本 地 或 网 络 回放 、 可 扩充 的 
媒体 类 型 、 部 件 下 载 、 可 伸缩 的 媒体 类 型 、 流 的 优先 级 化 、 多 语言 支持 及 环境 独立 性 。 

RM 是 Real 公司 推广 的 一 种 多 媒体 文件 格式 ， 具有 非常 好 的 压缩 比率 ， 是 网 上 应 用 最 广泛 的 
格式 之 一 。 可 以 使 用 RealPlayer 对 符合 Real Media 技术 规范 的 网 络 音频 /视频 资源 进行 实况 转播 ， 
并 且 Real Media 可 以 根据 不 同 的 网 络 传输 速率 制定 出 不 同 的 压缩 比率 ， 从 而 实现 在 低速 率 的 网 络 
上 进行 影像 数据 的 实时 传送 和 播放 。 

MOV 是 Apple 公司 推广 的 一 种 多 媒体 文件 格式 。 


4.4.2 小 实例 一 一 在 网 页 中 插入 视频 


利用 视频 技术 在 网 上 可 以 视频 聊天 、 在 线 看 电影 等 。 在 网 页 中 插入 视频 主要 有 两 种 方法 ， 一 
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种 方法 是 利用 ActiveX 插入 ; 另 一 种 方法 是 利用 插件 插入 。 网 页 中 插入 视频 的 效果 如 图 4-22 所 示 ， 
有 具体 操作 步骤 如 下 。 


图 4-22 插入 视频 效果 
原始 文件 :原始 文件 /04/4.4.2/index.html 
最 终 文件 : 最 终 文件 /04/4.4.2/index1.html 
步骤 01 人 打开 网 页 文档 ， 将 光标 置 于 要 插入 视频 的 位 置 ， 如 图 4-23 所 示 。 
步骤 024 执行 “插入 ”|“ 煤 体 ”| Flash Video (LL) 命令 ， 弹 出 “插入 FLV” 对 话 框 ， 如 图 4-24 
所 示 。 


讽 频 赤 弄 [时 过 式 下 载 视 类 


Dw .| BB ol=loLx] 
Zieh Wal] BEV AD Saw Rio) ea(O ety ECW we 


URL 
(入 入 FLY 文 人 的 机 中 地 时 入 在 


4 局 ee Sin 1 确 小 训 归 140) | 


(EE 


ye ss objtet natses se jet ja jmer ronslide js | 


bE EE | 


RE 回 腿 凶 R 比 [过 到 太 小 ] 
高 度 Eh 

st 

口 sa 得 亲 让 


[ Eg 


[asp Sh AID eo 


图 4-23 ”打开 网 页 文档 424 “插入 FLV” 对 话 框 


74 


第 4 章 设计 丰富 多 彩 的 图 像 和 多 媒体 网 页 (9 


步骤 034 在 对 话 框 中 单 击 URL 后 面 的 “浏览 ”按钮 ， 在 弹出 的 “选择 FLV” 对 话 框 中 选择 视频 
文件 ， 单 击 “ 确 定 ” 按 钮 ， 如 图 4-25 所 示 。 
步 野 044 返回 到 “插入 FLV” 对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 单 击 “ 确 定 ”按钮 ， 如 图 


4-26 所 示 。 
二 
Mi ER ell 
Ee | 
EE Wy 
NF TH) 
让 现 [ew S03 1 电路 殉 概 40) » 
SE 


可 度 250 加 限 入 高 比 。 [后 弄 大小 ] 
i 280010 


加 部 贿 这 
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局 DAIA 四 
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图 4-25 “选择 FLV” 对 话 框 图 4-26 
步骤 054 单 击 “确定 ” 按 钮 ， 插 入 视频 ， 如 图 4-27 所 示 。 


步骤 064 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 如 图 4-22 所 示 。 
Dw -| on ot-lel *h 


“插入 FLV” 对 话 框 


hy Gp Cole aaa aD lle ed day 0 


4-27 插入 视频 


4.5 插入 Flash 


Flash SWF 动画 是 在 专门 的 Flash 软件 中 完成 的 ， 在 Dreamweaver 中 能 将 现 有 的 Flash SWF 
动画 插入 到 文档 中 。 在 Dreamweaver 中 插入 Flash SWF 影片 的 效果 如 图 4-28 所 示 ， 有 具体 操作 步骤 
如 下 。 
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图 4-28 插入 Flash SWF 影片 的 效果 


原始 文件 : 原始 文件 /04/4.5/index.htm 
最 终 文件 :最终 文件 /04/4.5/indexl.htm 
步 骂 01 打开 网 页 文档 ， 将 光标 置 于 要 插入 Flash SWF 影片 的 位 置 ， 如 图 4-29 所 示 。 
步骤 024 执行 “插入 ”|“ 媒 体 ”| Flash SWF 命令 ， 弹 出 “选择 SWF” 对 话 框 ， 在 对 话 框 中 选择 
文件 jiud.swf， 如 图 4-30 所 示 。 


Dw 二 GOEISLE 


4-29 打开 网 页 文档 图 4-30 “选择 SWF” 对话 框 


友 指点 迷津 女 
单 击 “ 媒 体 ”插入 栏 中 的 按钮 团 ， 也 可 以 弹出 “选择 SWF” 对 话 框 ， 插 入 SWF 影片 。 
步骤 034 单 击 “ 确 定 ”按钮 ， 插 入 SWF 影片 ， 如 图 4-31 所 示 。 
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图 4-31 插入 SWF 影片 
步骤 044 选中 插入 的 Flash， 打 开 “ 属 性 ”面板 ， 在 “属性 ”面板 中 设置 Flash 相关 属性 ， 如 图 


4-32 所 示 。 
Dw Bm. Ca Ol-lol x] 
文件 (月 病 (E] 时 看 (V】 姓 入 (1) 修改 (M) 人 惧 式 (O) 布 人 |C] 站 SI5) 守 D(W) 9 
re 


[rp 
1| 反 [到 f] 弄 撞 四” 久 是 
NN 器 


3 

区 了 mm on 文 间 四 je wt 局 已 痛 有 看 色 全 站 
[3 

i 本 下 边 丙 mn)| 山 有 0) 于 坟 » HFNYWE le 
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图 4-32 Flash 属性 面板 
友 指点 迷津 妇 


SWF 属性 面板 的 各 项 设置 。 


。 SWF 文本 框 : 输入 SWF 动画 的 名 称 。 

e。“ 宽 ”和 “高 ”: 设置 文档 中 SWF 动画 的 尺寸 ， 可 以 输入 数值 改变 其 大 小 ， 也 可 以 在 文档 中 拖 动 缩 
放手 柄 来 改变 其 大 小 。 

e。 “文件 ”: 指定 SWF 文件 的 路 径 。 

“背景 颜色 ”: 指定 影片 区 域 的 背景 颜色 。 在 不 播放 影片 时 ( 在 加 载 时 和 在 播放 后 ) 也 显示 此 颜色 。 

“循环 ”: 选中 此 复 选 框 可 以 重复 播放 SWF 动画 。 

日 “自动 播放 ”: 选中 此 复 选 框 ， 当 在 浏览 器 中 载 入 网 页 文档 时 ， 自 动 播放 SWF。 

日 “垂直 边 距 ”和 “水 平 边 距 ?: 指定 动画 边框 与 网 页 上 边界 和 左边 界 的 距离 。 

。“ 品 质 ”: 设置 SWF 动画 在 浏览 器 中 的 播放 质量 ， 包 括 “ 低 品质 *、“ 自 动 低 品质 ”、“ 自 动 高 品质 ” 


a 
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和 “高 品质 ”4 个 选项 。 

。 “比例 ” 设置 显示 比例 ,包括 “ 默 认 ( 全 部 显示 、“ 无 边框 ”和 “严格 匹配 ”3 个 选项 。 

。 “对齐 ”: 设置 SWF 在 页 面 中 的 对 齐 方式 。 

e。 Wmode: 为 SWF 文件 设置 Wmode 参数 以 避免 与 DHTML 元 素 (例如 Spry 构件 ) 相 冲 突 。 

。“ 播 放 ”: 在 “文档 ”窗口 中 播放 影片 。 

日 “参数 ?: 打开 一 个 对 话 框 ， 可 在 其 中 输入 传递 给 影片 的 附加 参数 。 影 片 必须 已 设计 好 ， 可 以 接收 
这 些 附 加 参数 


步 野 054 保存 文档 ， 按 F12 键 即 可 在 浏览 器 中 预览 ， 效 果 如 图 4-28 所 示 。 


4.6 ”网 页 链接 的 创建 


网 站 实际 上 是 由 很 多 网 页 组 成 的 ， 那 么 网 页 之 间 是 如 何 联系 的 呢 ? 这 就 是 网 页 的 “链接 ”。 
4.6.1 网 页 链接 的 基本 类 型 


链接 ， 又 称 超 链接 (Hyperlink)， 它 作为 网 页 间 的 桥梁 ， 起 着 相当 重要 的 作用 。 网 页 中 的 很 
多 对 象 都 可 以 加 入 “链接 ”的 属性 。 超 链接 是 从 一 个 网 页 或 文件 到 另 一 个 网 页 或 文件 的 链接 ， 包 
括 图 像 或 多 媒体 文件 ， 还 可 以 指向 电子 邮件 地 址 或 程序 。 当 网 站 访问 者 单 击 超 链接 时 ， 将 根据 目 
标的 类 型 执行 相应 的 操作 ， 即 显示 在 Web 浏览 器 中 打开 或 运行 。 

要 正确 创建 链接 , 就 必须 了 解 链接 与 被 链接 文档 之 间 的 路 径 。 每 个 网 页 都 有 一 个 唯一 的 地 址 ， 
称 为 统一 资源 定位 符 (URL)。 然 而 ， 当 在 网 页 中 创建 内 部 链接 时 ， 一般 不 会 指定 链接 文档 的 完整 
URL， 而 是 指定 一 个 相对 当前 文档 或 站 点 根 文件 夹 的 相对 路 径 。 

在 网 页 中 的 链接 按照 链接 路 径 的 不 同 可 以 分 为 3 种 形式 : 绝对 路 径 、 相 对 路 径 和 基于 根 目 录 
路 径 。 

这 些 路 径 都 是 网 页 中 的 统一 资源 定位 ， 只 不 过 后 两 种 路 径 将 URL 的 通信 协议 和 主机 名 省 略 
了 。 后 两 种 路 径 必 须 有 参照 物 ， 一 种 是 以 文档 为 参照 物 ; 另 一 种 是 以 站 点 的 根 目录 为 参照 物 。 而 
第 一 种 路 径 就 不 需要 有 参照 物 ， 其 是 最 完整 的 路 径 ， 也 是 标准 的 URL。 


4.6.2 小 实例 一 一 图 像 链接 
当 用 户 浏览 网 页 ， 鼠 标 经 过 图 像 时 ， 会 出 现 一 个 手 形 图 标 ， 提 示 浏 览 者 这 是 带 链 接 的 图 像 。 


此 时 单 击 鼠 标 ， 会 打开 所 链接 的 网 页 ， 这 就 是 图 像 超 链接 。 创 建 图 像 链接 的 效果 如 图 4-33 所 示 ， 
有 具体 操作 步骤 如 下 。 
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图 433 ”创建 图 像 链接 效果 
原始 文件 ， 原始 文件 /04/4.6.2/index.html 
最 终 文件 :最终 文件 /04/4.6.2/index1.html 
步 最 014 打开 网 页 文档 ， 选 中 要 创建 链接 的 图 像 ， 如 图 4-34 所 示 。 
步 又 024 打开 “属性 ”面板 ， 在 面板 中 单 击 “ 链 接 ” 文本 框 右边 的 “浏览 文件 ”按钮 男 ， 弹 出 
“选择 文件 ”对 话 框 ， 选 择 链 接 的 文件 jiafang.html， 如 图 4-35 所 示 。 
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图 4-34 打开 网 页 文档 图 4-35 “选择 文件 ”对 话 框 
步骤 034 单 击 “ 确 定 ”按钮 ， 文 件 即 可 被 添加 到 “链接 ” 文本 框 中 ， 如 图 4-36 所 示 。 


4-36 添加 链接 
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六 知识 要 点 友 
在 属性 面板 中 的 “链接 ”文本 框 中 也 可 以 直接 输入 要 链接 的 内 容 。 
步骤 044 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 4-33 所 示 。 


4.6.3 ”小 实例 一 一 E-mail 链接 


E-mail 链接 也 叫 电子 邮件 链接 ， 电 子 邮件 地 址 作为 超 链接 的 链接 目标 与 其 他 链接 目标 不 同 。 
当 用 户 在 浏览 器 上 单 击 指向 电子 邮件 地 址 的 超 链接 时 ,将 会 打开 默认 的 邮件 管理 器 的 新 邮件 窗口 ， 
其 中 会 提示 用 户 输入 信息 并 将 该 信息 传送 给 指定 的 E-mail 地 址 。 当 单 击 文字 “联系 我 们 ”时 效果 
如 图 4-37 所 示 ， 具 体操 作 步 骤 如 下 。 


oN, tT TR | 
,六 户 和 有 户 明江 让 9， 二 吉政、 计 场 、 冤 、 和 村 有 中 


当今， | 为 人 友和 了 让 为 宇 直 隐 失 间 1 三 共计 
A yor rE RA TPE ,IS 


图 4-37 创建 电子 邮件 链接 的 效果 
六 提示 女 
单 击 电子 邮件 链接 后 ,系统 将 自动 启动 电子 邮件 软件 ,并 在 收 件 人 地 址 中 自动 填写 上 电子 邮件 链接 所 
指定 的 邮箱 地 址 。 


原始 文件 :原始 文件 /04/4.6.3/index.html 
最 终 文件 : 最终 文 件 /04/4.6.3/index1.html 
步 晤 014 打开 网 页 文档 ， 将 光标 置 于 要 创建 电子 邮件 链接 的 位 置 ， 如 图 438 所 示 。 
步骤 024 执行 “插入 ” | “电子 邮件 链接 ” 命令 ， 弹 出 “电子 邮件 链接 ”对 话 框 ， 在 对 话 框 的 
“文本 ”文本 框 中 输入 “联系 我 们 ”， 在 “电子 邮件 ”文本 框 中 输入 sdhzgw@163.com， 
如 图 4-39 所 示 。 
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图 4-38 打开 网 页 文档 图 4-39 “电子 邮件 链接 ”对 话 框 


步骤 034 单 击 “ 确 定 ”按钮 ， 创 建 电子 邮件 链接 ， 如 图 4-40 所 示 。 
i EE el 
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下 
二 庙 用 于 各 类 交通 证 


图 4-40 创建 电子 邮件 链接 


六 高 手 支 招 女 

单 击 “ 常 用 ”插入 栏 中 的 “电子 邮件 链接 ”按钮 全,， 也 可 以 弹出 “电子 邮件 链接 ”对 话 框 
步 野 044 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 4-37 所 示 。 

六 高 手 支 招 太 


如 何 避 免 页 面 电 子 邮件 地 址 被 搜索 到 ? 

如 果 拥 有 一 个 站 点 并 发 布 了 E-mail 链接 ， 那 么 其 他 人 会 利用 特殊 工具 搜索 到 这 个 地 址 并 加 入 到 他 们 
的 数据 库 中 ， 这 样 经 常会 收 到 一 些 垃圾 信 。 要 想 避 人 免 E-mail 地 址 被 搜索 到 ， 可 以 在 页 面 上 不 按 标准 
格式 书写 E-mail 链接 ， 如 yourname at mail.com， 它 等 同 于 yourname@mail.com.。 
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4.6.4 小 实例 一 一 下 载 文件 链接 


如 果 要 在 网 站 中 提供 下 载 资料 ， 就 为 文件 提供 下 载 链接 ， 如 果 超 链接 指向 的 不 是 一 个 网 页 文 
件 ， 而 是 其 他 文件 例如 zip、mp3、exe 文件 等 ， 单 击 链接 的 时 候 就 会 下 载 文件 。 创 建 下 载 文件 的 
链接 效果 如 图 4-41 所 示 ， 具 体操 作 步 骤 如 下 。 
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4-41 下 载 文件 的 链接 效果 
妇 提示 娘 
网 站 中 每 个 下 载 文 件 必须 对 应 一 个 下 载 链 接 ,而 不 能 为 多 个 文件 或 者 一 个 文件 夹 建立 下 载 链接 如果 
需要 对 多 个 文件 或 者 文件 夹 提供 下 载 ， 只 能 利用 压缩 软件 将 这 些 文件 或 者 文件 夹 压缩 为 一 个 文件 . 


原始 文件 ， 原 始 文 件 /04/4.6.4/index.html 
最 终 文件 ， 最 终 文件 /04/4.6.4/index1.html 
步骤 01 打开 网 页 文档 ， 选 中 要 创建 链接 的 文字 ， 如 图 4-42 所 示 。 
步骤 024 执行 “窗口 ”|“ 属 性 ”命令 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 单 击 “ 链 接 ” 文本 框 右 边 
的 按钮 回 , 弹出 “选择 文件 ”对 话 框 , 在 对 话 框 中 选择 要 下 载 的 文件 “新 建文 本 文档 .zip”， 
如 图 4-43 所 示 。 
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图 4-42 ”打开 网 页 文档 图 4-43 “选择 文件 ”对 话 框 
步 又 03 单 击 “确定 ” 按 乌 ， 添加 到 “链接 ”文本 框 中 ， 加 加 4-44 所 示 。 


- 天 CE 
Br mg) 无 -~ (aw mm ] -9 Bim 
EE 

¥ Wa | 束 m“ 居 。W 四 


图 4-44 ”添加 到 “链接 ”文本 框 中 
步骤 044M 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 4-41 所 示 。 


4.6.5 ”小 实例 一 一 脚本 链接 


脚本 链接 执行 JavaScript 代码 或 调用 JavaScript 函数 。 它 非常 有 用 , 能够 在 不 离开 当前 网 页 的 
情况 下 为 访问 者 提供 有 关 某 项 的 附加 信息 。 下 面 利用 脚本 链接 创建 关闭 网 页 , 效果 如 图 4-45 所 示 ， 
有 具体 操作 步骤 如 下 。 


佳 乐 冷暖 设备 有 限 公司 


图 4-45 利用 脚本 链接 创建 关闭 网 页 
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原始 文件 : 原始 文件 /04/4.6.5/index.html 

最 终 文件 : 最 终 文件 /04/4.6.5/indexl1.html 
步骤 01M 打开 网 页 文档 ， 如 图 4-46 所 示 。 

步骤 024 选中 文字 “关闭 窗口 ”, 在 属性 面板 中 的 “链接 ”文本 框 中 输入 javascript:window.close0， 

如 图 4-47 所 示 。 


Dw 二 - ol=lel x 
HA el 可 RM DG way SW Wah 
aecmm 天 


Ww 


| 
| 
TERS 


| 
| 二 


图 4-46 ”打开 网 页 文档 图 4-47 输入 链接 


步骤 03 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 单 击 “ 关 闭 窗口 ”按钮 会 自动 弹出 一 个 提示 对 
话 框 ， 提 示 是 否 关闭 窗口 ， 单 击 “ 是 ”按钮 即 可 关闭 窗口 ， 效 果 如 图 4-45 所 示 。 


图 文 混 排 网 页 


4.7 实战 


文字 和 图 像 是 网 页 中 最 基本 的 元 素 ， 在 网 页 中 插入 图 像 会 使 得 网 页 更 加 生动 形象 。 在 网 页 中 
创建 图 文 混 排 网 页 的 方法 非常 简单 ， 如 图 4-48 所 示 的 是 图 文 混 排 的 效果 ， 有 具体 操作 步骤 如 下 。 


EP A 


图 4-48 图 文 混 排 网 页 效果 
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原始 文件 : 原始 文件 /04/ 实 战 /index.html 
最 终 文件 ， 最终 文件 /04/ 实 战 /index1 .html 


六 提示 女 

如 何 使 文字 和 图 片 内 容 共处 ? 

在 Dreamweaver 中 ， 图 片 对 象 是 需要 独占 一 行 的 ， 那 么 文字 内 容 只 能 在 与 其 平行 的 一 行 的 位 置 上 ， 
怎么 样 才 可 以 让 文字 围绕 着 图 片 显示 呢 ? 需要 选中 图 片 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “对 
齐 ”|“ 右 对 齐 ” 选 项 ， 这 时 会 发 现 文字 已 经 均匀 地 排列 在 图 片 的 右边 了 。 


步骤 01 打开 网 页 文档 ， 如 图 4-49 所 示 。 
Dw 五 CH Ol-lol x] 
文 #( 昌 。 演 性 日 址 吉 (V) 技 和 () 企 Mx(M) HS$(O ee OW La 


aed 
DIE EIEN 


TT 目 国 oa 
[3 


图 4-49 打开 网 页 文档 
步骤 024 将 光标 置 于 页 面 中 ， 输 入 相应 的 文字 ， 如 图 4-50 所 示 。 


Dw =. EH oIol x] 
六 和 移 治 (E] 王者 (V) 乱 和 ( WS(M) 党 0) S(O S55) BOVW) CoH 
ndechemr a EE OPN ey 


| 代码 | 拆 分 [去 计 | 实时 图。 二。 必 是 


es ( 引 干 片 )、 本 入土 、 本 入 兴 检 、 | 上 
oa 坟 血 全 名 从 术 各 基地， 年关 罗 法 Sooor 订 时， 入 村 主机 器 安 生 之 浊 ， 王 打 ， 
3 有 可 村 卉 区 村 地 中 扶正。 | 


公司 坚持 习 扶 兴 企 ， 目 关 铺 条 科 共和 员 ! 匡 人， 针 祥 人 只 o8 人 ， 建立 了 长 车 作 关外 网 ca 


公司 于 人 不安 等， “ASH 二 二 国 机场 ， 公 司 技 信 4 针 这 村 二 ， 基 建 人 
池 ， 全 力 林 赤 一 个 汉 共和 闭 、 硝 入 力 - 信 的 村 人 ti 训 中 心 ， 控 沁 及 全 99 雪人 | 


i a 
高， 基 得 社 会 人 和 方 认可 。 公司 相生 RR 这， 可比 帮 村 
和 


er dD SAD Gl A AD EE RAE 


图 4-50 输入 文字 
步 双 034 将 光标 置 于 文字 中 ， 执 行 “ 插 入 ”| “图像 ”|“ 图 像 ”命令 ， 弹 出 “选择 图 像 源 文件 ” 
对 话 框 ， 在 对 话 框 中 选择 图 像 images/guoyuan.jpg， 如 图 4-51 所 示 。 


网 页 设计 与 网 站 建设 全 攻略 
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图 4-51 “选择 图 像 源 文件 ”对 话 杠 
步骤 044 单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 4-52 所 示 。 


Dw 西 - 国 0OL-Iol xj 


图 4-52 ”插入 图 像 
步骤 054 选中 插入 的 图 像 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ”选项 ， 
如 图 4-53 所 示 。 


Ds ~ 
ip- 


Ee 二 


国 人 2 一人 全 窜 全 1， 注 于 
产 4 表 此 秀 ， 村 人 区 产 品 括 和 玫 二 基于 
二 扩 旬 村 人 各 导轨 ， 年 疡 时 shocoo 订 二 
IN 再 HL 可 二 申报 内 正 = 


图 4-53 ”设置 图 像 的 对 齐 方式 
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步骤 064 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 4-48 所 示 。 

太 提示 友 

修改 图 像 的 高 度 和 宽度 的 值 可 以 改变 图 像 的 显示 尺寸 ， 但 是 这 并 不 能 改变 图 像 下 载 所 用 的 时 间 ， 
因为 浏览 器 是 先 将 图 像 数 据 下 载 ， 然 后 才 改 变 图 像 尺寸 的 。 要 想 减 少 图 像 下 载 所 需要 时 间 并 使 图 


像 无 论 什么 时 候 者 显示 相同 的 尺寸 ， 建 议 在 图 像 编辑 软件 中 重新 处 理 该 图 像 ， 这 样 得 到 的 效果 将 
是 最 好 的 。 
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本 章 导 读 


表格 是 网 页 排版 设计 的 常用 工具 ， 表 格 在 网 页 中 不 仅 可 以 用 来 排列 数据 ， 而 且 可 以 对 页 面 
中 的 图 像 、 文 本 等 元 素 进 行 准确 的 定位 ， 使 得 页 面 在 形式 上 既 丰 富 多 彩 又 有 条 理 ， 从 而 使 页 面 
显得 更 加 整齐 有 序 。 本 章 主要 讲述 表格 的 创建 、 编 辑 表格 、 表 格 属性 的 设置 以 及 排序 和 整理 表 
格 内 容 等 。 


插入 表格 

编辑 表格 

设置 表格 属性 
排序 及 整理 表格 内 容 


实例 展示 
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导入 表格 式 数据 插入 圆 角 表格 


5.1 插入 表格 


在 Adobe Dreamweaver CC 中 ,表格 可 以 用 于 安排 网 页 文档 的 整体 布局 ， 起 着 非常 重要 的 
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作用 。 
5.1.1 小 实例 一 一 插入 表格 

在 Dreamweaver 中 ， 表 格 可 以 用 于 制作 简单 的 图 表 ， 还 可 以 用 于 安排 网 页 文档 的 整体 布局 ， 
起 着 非常 重要 的 作用 。 在 网 页 中 插入 表格 的 方法 非常 简单 ， 具 体操 作 步骤 如 下 。 


步骤 014 打开 网 页 文档 ， 将 光标 置 于 要 插入 表格 的 位 置 ， 如 图 5-1 所 示 。 
步骤 024 执行 “插入 ”|“ 表 格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 设 置 为 4， 
“ 列 数 ”设置 为 3，“ 表 格 宽 度 ” 设 置 为 80%， 如 图 5-2 所 示 。 


行 数 :4 列 3 
表 术 克 度 50 
像 过 


图 5-1 打开 网 页 文档 图 5-2 “表格 ”对 话 框 
太 知识 要 点 次 
在 “表格 ”对 话 框 中 可 以 进行 如 下 设置 。 
“ 行 数 ”: 在 文本 框 中 输入 新 建 表格 的 行 数 。 
。“ 列 ”: 在 文本 框 中 输入 新 建 表格 的 列 数 。 
“表格 宽度 ”: 用 于 设置 表格 的 宽度 ， 其 中 右边 的 下 拉 列 表 中 包含 百分比 和 像素 。 
。 “边框 粗细 ”: 用 于 设置 表格 边框 的 宽度 ， 如 果 设 置 为 0， 则 在 浏览 时 看 不 到 表格 的 边框 。 
“单元 格 边 距 ”: 单元 格 内 容 和 单元 格 边界 之 问 的 像素 数 。 
e。 “单元 格 间距 ”: 单元 格 之 间 的 像素 数 。 
e。 “标题 ”: 可 以 定义 表 头 样式 ，4 种 样式 可 以 任 选 一 种 。 
“辅助 功能 ”: 定义 表格 的 标题 和 摘要 信息 。 
“标题 >: 用 来 定义 表格 标题 。 
。“ 摘 要 ”: 用 来 对 表格 进行 注释 。 


步 又 034 单 击 “ 确 定 ” 按 钮 ， 插 入 表格 ， 如 图 5-3 所 示 。 
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图 5-3 插入 表格 
友 提示 友 


如 果 没 有 明确 指定 单元 格 间距 和 单元 格 边 距 的 值 ， 大 多 数 浏览 器 将 单元 格 边 距 默认 设置 为 1， 单元 格 
间距 设置 为 2 来 显示 表格 。 若 要 确保 浏览 器 不 显示 表格 中 的 边 距 和 间距 ,可 以 将 单元 格 边 距 和 间距 设 
置 为 0。 大 多 数 浏览 器 按 边 框 设置 为 1 显示 表格 。 


5.1.2 小 实例 一 一 添加 内 容 到 单元 格 


表格 建立 以 后 ， 就 可 以 向 表格 中 添加 各 种 元 素 了 ， 如 文本 、 图 像 等 。 在 表格 中 添加 文本 就 如 
同 在 文档 中 操作 一 样 ， 除 了 直接 输入 文本 ， 还 可 以 先 利 用 其 他 文本 编辑 器 编辑 文本 ， 然 后 将 文本 
拷贝 到 表格 里 ， 这 也 是 在 文档 中 添加 文本 的 一 种 简洁 而 快速 的 方法 。 将 光标 置 于 单元 格 中 ， 在 每 
个 单元 格 中 分 别 输入 相应 的 文字 ， 如 图 5-4 所 示 。 


现代 化 种 植 基地 品质 保 


图 5-4 添加 内 容 到 单元 格 


5.2 ”编辑 表格 


创建 表格 后 ， 用 户 根据 网 页 设置 需要 对 表格 进行 处 理 ， 例 如 ， 选 择 表格 和 选择 单元 格 、 调 整 
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表格 和 单元 格 的 大 小 、 添 加 或 删除 行 或 列 、 拆 分 单元 格 、 剪 切 、 复 制 和 粘贴 单元 格 等 ， 熟 练 掌握 
表格 的 基本 操作 ， 可 以 提高 制作 网 页 速度 。 


5.2.1 选择 表格 及 其 元 素 


要 想 对 表格 进行 编辑 ， 那 么 首先 选择 它 ， 主 要 有 以 下 4 种 方法 选取 整个 表格 。 


@ 将 光标 置 于 表格 的 左上 角 ， 按 住 鼠 标的 左 键 不 放 ， 拖 动 鼠 标 指针 到 表格 的 右 下 角 ， 将 整个 
表格 中 的 单元 格 选中 ， 单 击 筷 标的 右键 ， 在 弹出 的 快捷 菜单 中 选择 “表格 ”|“ 选 择 表格 ” 
命令 ， 如 图 5-5 所 示 。 


Dw .olel x 


TH) Wi eEV MA) PelM XO) S(O eels) CW m0 


5-5 执行 “选择 表格 ”命令 
@ 单 击 表 格 边 框 线 的 任意 位 置 ， 即 可 选中 表格 ， 如 图 5-6 所 示 。 


Dw 生 Ee 
San sao ao sh MD mo sa eno0 am 


图 5-6 单 击 表格 边框 线 
@ 将 光标 置 于 表格 内 任意 位 置 ， 执行“ 修改 ”|“ 表 格 ”|“ 选 择 表格 ”命令 ， 如 图 5-7 所 示 。 
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5-7 执行 “选择 表格 ”命令 
@ 将 光标 置 于 表格 内 任意 位 置 ， 单 击 文档 窗口 左下 角 的 <table> 标 签 ， 
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5-8 选择 <table> 标 签 
选择 表格 的 行 与 列 也 有 两 种 不 同 的 方法 。 


@ 当 饼 标 位 于 要 选择 行 首 或 列 项 时 ， 和 鼠标 指 针 形状 变 成 了 黑 箭 头 ， 单 击 筷 标 左 键 即 可 选中 
列 或 行 ， 如 图 5-9 所 示 和 5-10 所 示 。 
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5-9 选择 列 图 5-10 选择 行 
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@ 按 住 鼠 标 左 键 不 放 从 左 至 右 或 者 从 上 向 下 拖 动 ， 即 可 选中 列 或 者 行 ， 如 图 5-11 所 示 和 
5-12 所 示 。 
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图 5-11 选中 列 图 5-12 选中 行 


选择 表格 中 的 单元 格 有 两 种 方式 ， 一 种 是 选择 单个 单元 格 ， 另 一 种 是 选择 多 个 单元 格 。 

@ 按 住 Ctrl 键 ， 然 后 单 击 要 选中 的 单元 格 即 可 。 

@ 将 光标 移 到 要 选中 的 单元 格 中 并 单 击 释放 ， 按 住 Ctrl + A 组 合 键 ， 即 可 选中 该 单元 格 。 

@ 将 光标 置 于 要 选中 的 单元 格 中 ， 执 行 “ 编 辑 ”|“ 全 选 ”命令 ， 即 可 选中 该 单元 格 。 

@ 将 光标 置 于 要 选中 的 单元 格 中 ， 单 击 文档 窗口 左下 角 的 <td> 标 签 可 以 选中 。 

@ 按 住 Shift 键 不 放 并 单 击 选择 多 个 单元 格 中 的 第 一 个 和 最 后 一 个 ， 可 以 选中 多 个 相 邻 的 
单元 格 。 

@ 按 住 Ctrl 键 不 放 单 击 并 选择 多 个 单元 格 , 可 以 选中 多 个 相 邻 或 不 相 邻 的 单元 格 ,如 图 5-13 
所 示 。 


天 和 
x 现 全 种 村 基地 品质 保证 ， 


图 5-13 ”选中 不 相 邻 的 单元 格 


5.2.2 ”调整 表格 和 单元 格 的 大 小 


在 文档 中 插入 表格 后 ， 若 想 改变 表格 的 高 度 和 宽度 ， 可 以 先 选中 该 表格 ， 在 出 现 的 3 个 控制 
点 后 将 鼠标 移动 到 控制 点 上 ， 当 鼠标 指针 变 成 如 图 5-14、5-15 和 5-16 所 示 的 形状 时 ， 按 住 鼠标 左 
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键 并 拖 动 即 可 改变 表格 的 高 度 和 宽度 。 


了 痛 b 芭 品质， 


图 5-14 调整 表格 的 高 度 图 5-15 ”调整 表格 的 宽度 


CE | 
0 aq aa A sa aaol etd aa mW ea 
| 


| 


图 5-16 同时 调整 表格 的 宽度 和 高 度 


太 提示 六 
还 可 以 在 “属性 ”面板 中 改变 表格 的 “ 宽 ” 和 “高 ”的 值 ， 来 改变 表格 的 大 小 。 
5.2.3 添加、 删除 行 或 列 


可 以 执行 “修改 ”|“ 表 格 ” 菜 单 中 的 子 命令 ， 增 加 或 减少 行 与 列 。 

增加 行 与 列 可 以 用 以 下 方法 。 

@ 将 光标 置 于 相应 的 单元 格 中 ， 执 行 “修改 ”|“ 表 格 ”|“ 插 入 行 ”命令 ， 即 可 插入 一 行 。 

@ 将 光标 置 于 相应 的 位 置 ， 执 行 “修改 ”|“ 表 格 ”|“ 插 入 列 ” 命 令 ， 即 可 在 相应 的 位 置 插 
入 一 列 。 

@ 将 光标 置 于 相应 的 位 置 ， 执 行 “修改 ”|“ 表 格 ”|“ 插 入 行 或 列 ” 命 令 ， 弹 出 “插入 行 或 
列 ” 对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 5-17 所 示 。 单 击 “ 确 定 ” 按 钮 ， 即 可 在 相 
应 的 位 置 插入 行 或 列 ， 如 图 5-18 所 示 。 
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图 5-17 “插入 行 或 列 ” 对 话 框 


图 5-18 插入 行 
六 高 手 支 招 六 


在 “插入 行 或 列 ” 对 话 框 中 可 以 进行 如 下 设置 


。 插 入: 包含 “ 行 ”和 “ 列 ” 两 个 单 选 按钮 ， 一 次 只 能 选择 其 中 一 个 来 插入 行 或 者 列 。 该 选项 组 的 
初始 状态 选择 的 是 “ 行 ” 选 项 ， 所 以 下 面 的 选项 就 是 “ 行 数 "。 如 果 选 择 的 是 “ 列 ” 选 项 ， 那 么 下 
面 的 选项 就 变 成 了 “ 列 数 "， 在 “ 列 数 ”选项 的 文本 框 内 可 以 直接 输入 要 插入 的 列 数 。 

。 位 置 : 包含 “所 选 之 上 ”和 “所 选 之 下 ”两 个 单 选 按钮 。 如 果 “ 插 入 ”选项 选择 的 是 “ 列 ” 选 项 ， 
那么 “位 置 ”选项 后 面 的 两 个 单 选 按钮 就 会 变 成 “在 当前 列 之 前 ”和 “在 当前 列 之 后 ”。 
删除 行 或 列 有 以 下 几 种 方法 。 


@ 选中 要 删除 的 行 或 列 ， 执 行 “ 编 辑 ”|“ 清 除 ” 命 令 ， 即 可 删除 选中 的 行 或 列 ， 如 图 5-19 
所 示 。 


5-19 执行 “清除 ”命令 
@ 将 光标 置 于 要 删除 行 或 列 的 位 置 ， 执 行 “ 修 改 ”|“ 表 格 ”|“ 删 除 行 ”命令 ， 或 执行 “ 修 
改 ”|“ 表 格 ”|“ 删 除 列 ” 命 令 ， 即 可 删除 行 或 列 。 
@ 选中 要 删除 的 行 或 列 ， 按 Delete 键 或 按 BackSpace 键 也 可 删除 行 或 列 。 


( q IT 
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5.2.4” 拆 分 单元 格 


在 使 用 表格 的 过 程 中 ， 有 时 需要 拆 分 单元 格 以 达到 自己 所 需 的 效果 。 拆 分 单元 格 就 是 将 选中 
的 表格 单元 格 拆 分 为 多 行 或 多 列 ， 具 体操 作 步 骤 如 下 。 
步骤 01 将 光标 置 于 要 拆 分 的 单元 格 中 ， 执 行 “ 修 改 ” | “表格 ”|“ 拆 分 单元 格 ” 命令， 弹出 “ 拆 
分 单元 格 ”对话 框 ， 如 图 5-20 所 示 。 
步骤 024 在 对 话 框 中 的 “把 单元 格 拆 分 ”选择 “ 列 ”，“ 列 数 ”设置 为 3， 单 击 “ 确 定 ” 按 钮 
即 可 将 单元 格 拆 分 ， 如 图 5-21 所 示 。 
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图 5-20 “ 拆 分 单元 格 ” 对 话 框 图 5-21 拆 分 单元 格 


太 高 手 支 招 六 
拆 分 单元 格 还 有 以 下 两 种 方法 如 下 。 


@ 将 光标 置 于 拆 分 的 单元 格 中 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “表格 ”|“ 拆 分 单元 格 ” 
选项 ， 弹 出 “ 拆 分 单元 格 ”对 话 框 ， 然 后 进行 相应 的 设置 。 
@ 单 击 “ 属 性 ”面板 中 的 “ 拆 分 单元 格 为 行 或 列 ”按钮 区 ， 它 往往 是 创建 复杂 表格 的 重要 步骤 。 


5.2.5 合并 单元 格 


合并 单元 格 就 是 将 选中 表格 单元 格 的 内 容 合并 到 一 个 单元 格 。 

首先 将 要 合并 的 单元 格 选中 ;然后 执行 “修改 ”| “表格 ”| “合并 单元 格 ” 命 令 ， 将 多 个 单元 
格 合并 成 一 个 单元 格 。 或 选中 单元 格 单 击 右键 , 在 弹出 的 快捷 菜单 中 选择 “表格 ”|“ 合 并 单元 格 ” 
命令 ， 如 图 5-22 所 示 ， 将 多 个 单元 格 合并 成 一 个 单元 格 ， 如 图 5-23 所 示 。 
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5-22 


选择 “合并 单元 格 ” 命 令 
友 高 手 支 招 太 


也 可 以 单 击 “属性 ”面板 中 的 “合并 所 选单 元 格 ， 使 用 跨度 ”按钮 回 ， 它 往往 是 创建 复杂 表格 的 重 


要 步骤 。 
5.2.6 拷贝、 粘贴 表格 


拷贝 和 粘贴 是 我 们 平时 操作 计算 机 时 最 常 做 的 一 件 事 了 。 可 以 使 用 Dreamweaver 对 表格 进行 


拷贝 和 粘贴 。 


首先 选中 需要 拷贝 的 表格 ， 执行“ 编辑 ”|“ 拷 贝 ”命令 ， 如 图 5-24 所 示 ， 然 后 将 光标 置 于 
要 粘贴 的 位 置 ， 执 行 “ 编 辑 ”|“ 粘 贴 ”命令 ， 即 可 粘贴 相应 的 内 容 ， 可 以 将 复制 的 表格 粘贴 为 一 


个 新 的 独立 表格 ， 如 图 5-25 所 示 。 
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图 5-24 执行 “拷贝 ”命令 


5.3 ”设置 表格 属性 


直接 插入 的 表格 有 时 并 不 能 让 人 满意 ， 在 Dreamweaver 中 ， 通 过 设置 表格 或 单元 格 的 属性 ， 


可 以 很 方便 地 修改 表格 的 外 观 。 


图 5-23 合并 单元 格 
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图 5-25 ”粘贴 内 容 
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5.3.1 设置 整个 表格 的 属性 


创建 表格 后 ， 可 以 根据 实际 需要 对 表格 的 属性 设置 ， 如 宽度 、 边 框 和 对 齐 等 ， 也 可 仅 对 某 些 
单元 格 设置 。 设 置 表格 属性 之 前 首先 要 选中 表格 ， 在 “属性 ”面板 中 将 显示 表格 的 属性 ， 并 进行 
相应 的 设置 ， 如 图 5-26 所 示 。 
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图 5-26 设置 表格 属性 


友 高 手 支 招 女 
表格 “属性 ”面板 参数 如 下 。 


“表格”: 输入 表格 的 名 称 。 

®@“ 行 ”和 Cols: 输入 表格 的 行 数 和 列 数 。 

@“ 宽 ”: 输入 表格 的 宽度 ， 其 单位 可 以 是 “像素 ”或 “百分比 ”。 

“像素 ”: 选择 该 项 ， 表 明 该 表格 的 宽度 值 是 像素 值 。 这 时 表格 的 宽度 是 绝对 宽度 ， 不 随 浏 览 器 窗 
口 的 变化 而 变化 。 

“百分比 ”: 选择 该 项 ， 表 明 该 表格 的 宽度 值 是 表格 宽度 与 浏览 器 窗口 宽度 的 百分比 数值 。 这 时 表 
格 的 宽度 是 相对 宽度 ， 会 随 着 浏览 器 窗口 大 小 的 变化 而 变化 。 

Cellpad: 单元 格 内 容 和 单元 格 边界 之 间 的 像素 数 。 

CellSpace: 相 邻 的 表格 单元 格 间 的 像素 数 。 

Align: 设置 表格 的 对 齐 方式 ， 有 “默认 ”、“ 左 对 齐 *、“ 居 中 对 齐 ” 和 “ 右 对 齐 ”4 个 选项 。 
Border: 用 来 设置 表格 边框 的 宽度 。 

号 用 于 清除 列 宽 . 

镶 将 表格 宽 由 百分比 转换 为 像素 。 

各 将 表格 宽 由 像素 转换 换 为 百分比 。 

也 用 于 清除 行 高 。 
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5.3.2 ”设置 行 、 列 和 单元 格 属性 


将 光标 置 于 单元 格 中 ， 该 单元 格 就 处 于 选中 状态 ， 此 时 “属性 ”面板 中 显示 出 所 有 允许 设置 
的 单元 格 属性 的 选项 ， 如 图 5-27 所 示 。 


3 ss CE 
mc | 大 ha -JE 本 ms 
四 [mom on 是 和 9 

x des zm  W 四 


图 5-27 单元 格 的 “属性 ”面板 
太 高 手 支 招 次 
在 单元 格 “属性 ”面板 中 可 以 设置 以 下 参数 。 
®@ “水平” 设置 单元 格 中 对 象 的 左右 对 齐 方式 , “水 平 ”下 拉 列 表 框 中 包含 “默认 ”、“ 左 对 齐 *、“ 居 
中 对 齐 ” 和 “ 右 对 齐 ”4 个 选项 。 
“垂直 ”: 设置 单元 格 中 对 象 的 上 下 对 齐 方式 ,“ 垂 直 ” 下 拉 列 表 框 中 包含 “默认 ”、“ 顶 端 "、“ 居 中 ”、 
“底部 ”和 “基线 ”5 个 选项 。 
“ 宽 ” 和 “高 >: 用 于 设置 单元 格 的 宽 与 高 。 
“不 换行 ": 表示 单元 格 的 宽度 将 随 文字 长 度 的 不 断 增加 而 加 长 。 
“标题 >: 将 当前 单元 格 设置 为 标题 行 。 
“背景 颜色 ”: 用 于 设置 单元 格 的 颜色 。 


5.4 ”排序 和 整理 表格 内 容 


为 了 更 加 快速 而 有 效 地 处 理 网 页 中 的 表格 和 内 容 ，Dreamweaver CC 提供 了 多 种 自动 处 理 功 
能 ， 包 括 导入 表格 数据 和 排序 表格 等 。 
5.4.1 导入 表格 式 数据 


Dreamweaver 中 导入 表格 式 数据 功能 能 够 根据 素材 来 源 的 结构 , 为 网 页 自动 建立 相应 的 表格 ， 
并 自动 生成 表格 数据 。 因 此 ， 当 遇 到 大 篇 幅 的 表格 内 容 编排 ， 而 手头 又 拥有 相关 表格 式 素材 时 ， 
便 可 使 网 页 编排 工作 轻松 得 多 。 下 面 通过 实例 讲述 导入 表格 数据 ， 效 果 如 图 5-28 所 示 ， 有 具体 操作 
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步骤 如 下 。 
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[| 
5-28 ”导入 表格 式 数据 效果 


原始 文件 ， 原始 文件 /05/5.4.1/index.html 
最 终 文件 : 最 终 文件 /05/5.4.1/indexl.html 


步骤 014 打开 网 页 文档 ， 将 光标 置 于 要 导入 表格 式 数据 的 位 置 ， 如 图 5-29 所 示 。 


步骤 02 执行 “文件 ”|“ 导 入 ”|“ 表 格式 数据 ”命令 ， 弹 出 “导入 表格 式 数据 ”对 话 框 ， 如 图 
5-30 所 示 。 


下 所 件 | 
8 行 [Eb [Ca] 
i ES Ce 
| | 
单元 格 边 中 | 
和 元 活 丰 EE | 
图 5-29 打开 网 页 文档 5-30 “导入 表格 式 数据 ”对 话 杠 
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友 知识 要 点 友 

在 “导入 表格 式 数据 ”对 话 框 中 可 以 进行 如 下 设置 。 

。 数据 文件 : 输入 要 导入 的 数据 文件 的 保存 路 径 和 文件 名 ， 或 单 击 右边 的 “浏览 ”按钮 进行 选择 。 

。 定 界 符 : 选择 定 界 符 ， 使 之 与 导入 的 数据 文件 格式 匹配 。 有 “Tab”、“ 误 点 "、“ 分 号 "、“ 引 号 ”和 

“其 他 ”5 个 选项 。 

。 表格 宽度 : 设置 导入 表格 的 宽度 。 

e 匹配 内 容 : 勾 选 此 单 选 按 钮 ， 创 建 一 个 根据 最 长 文件 进行 调整 的 表格 。 

。 设置 为 : 勾 选 此 单 选 按钮 ， 在 后 面 的 文本 框 中 输入 表格 的 宽度 以 及 设置 其 单位 。 

。 单元 格 边 距 : 单元 格 内 容 和 单元 格 边界 之 间 的 像素 数 。 

。 单元 格 间距 : 相 邻 的 表格 单元 格 间 的 像素 数 。 

。 格式 化 首 行 : 设置 首 行 标题 的 格式 。 

。 边框 : 以 像素 为 单位 设置 表格 边框 的 宽度 。 

步骤 034 在 对 话 框 中 单 击 “ 数 据 文 件 ” 文 本 框 右边 的 “浏览 ”按钮 ， 弹 出 “打开 ”对 话 框 ， 在 
对 话 框 中 选择 数据 文件 ， 如 图 5-31 所 示 。 

步 又 044 单 击 “打开 ”按钮 ， 添 加 到 “数据 文件 ”文本 框 中 ， 在 对 话 框 中 的 “ 定 界 符 ” 下 拉 列 
表 中 选择 “ 逗 点 ”选项 ，“ 表 格 宽度 ”选中 “匹配 内 容 ” 单 选 按钮 ， 如 图 5-32 所 示 。 


=- @ 让 巴 回 - 
修改 时 
2015/5/5 1035 


型 所 文件 f11e:///D1/ 网 站 建设 主 区 本 / 戏 和 确定 


证 8 特 入 
素 格 填 度 加 匹配 A 认 he 
设置 为![ ，] [分 比 
< 一 单元 格 边 距 2 阁 区 |t 首 行 :[ 掉 本 x] 
- a E 
文件 类 型 en) [所 有 文件 Gx) 2 [ER 
图 5-31 “打开 ”对 话 框 图 5-32 “导入 表格 式 数据 ”对 话 框 


太 高 手 支 招 六 
在 导入 数据 表格 时 注意 定 界 符 必须 是 过 点 ， 否 则 可 能 会 造成 表格 格式 的 混乱 。 
步骤 054M 单 击 “ 确 定 ”按钮 ， 导 入 表格 式 数据 ， 如 图 5-33 所 示 。 
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图 5-33 ”导入 表格 式 数据 
步骤 064 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 5-28 所 示 。 


5.4.2 ”排序 表格 


排序 表格 的 主要 功能 针对 具有 格式 数据 的 表格 而 言 ， 是 根据 表格 列表 中 的 数据 来 排序 的 。 下 
面 通过 实例 讲述 排序 表格 ， 效 果 如 图 5-34 所 示 ， 具 体操 作 步 又 如 下 。 


图 5-34 排序 表格 效果 


原始 文件 : 原始 文件 /05/5.4.2/index.html 
最 终 文件 : 最终 文 件 /05/5.4.2/index1.html 


步骤 01 打开 网 页 文档 ， 如 图 5-35 所 示 。 
步骤 02 选中 表格 ， 执 行 “ 命 令 ”|“ 排 序 表 格 ”命令 ， 弹 出 “排序 表格 ”对 话 框 。 在 对 话 框 中 


将 “排序 按 ” 设置 为 “ 列 2”，“ 顺 序 ” 设 置 为 “ 按 数字 顺序 ”， 在 下 拉 列 表 中 选择 “ 降 
序 ”， 如 图 5-36 所 示 。 
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图 5-35 ”打开 网 页 文档 图 5-36 “排序 表格 ”对 话 框 
六 高 手 支 招 克 
在 “排序 表格 ”对 话 框 中 可 以 设置 如 下 。 


。 排序 按 : 确定 哪个 列 的 值 将 用 于 对 表格 排序 。 

。 顺序: 确定 是 按 字母 还 是 按 数字 顺序 以 及 升序 还 是 降序 对 列 排序 。 

。 再 按 : 确定 在 不 同 列 上 第 二 种 排列 方法 的 排列 顺序 。 在 其 后 面 的 下 拉 列 表 中 指定 应 用 第 二 种 排列 
方法 的 列 ， 在 后 面 的 下 拉 列 表 中 指定 第 二 种 排序 方法 的 排序 顺序 。 

。 排序 包含 第 一 行 : 指定 表格 的 第 一 行 应 该 包括 在 排序 中 。 

。 排序 标题 行 : 指定 使 用 与 body 行 相同 的 条 件 对 表格 thead 部 分 中 的 所 有 行 排序 。 

。 排序 脚注 行 : 指定 使 用 与 body 行 相同 的 条 件 对 表格 tfoot 部 分 中 的 所 有 行 排序 。 

。 完成 排序 后 所 有 行 颜 色 保持 不 变 : 指定 排序 之 后 表格 行 属性 应 该 与 同一 内 容 保持 关联 。 


步骤 034 单 击 “ 确 定 ”按钮 ， 对 表格 进行 排序 ， 如 图 5-37 所 示 。 


RT (CAFRAR 
小 


到 | -Fexmy 
|smER bd | 出 | 一 羽 一 末 (大 不 开 现 末 
E 
国 


x 


E25 


[p= 人 加 四 加 = 人 


Es 
EE L 


EE 


rr GE EE 


BL CS GD le > QD le ry A LL 下 二 EE 
地 


图 5-37 对 表格 进行 排序 
友 高 手 支 招 太 
如 果 表 格 中 含有 合并 或 拆 分 的 单元 格 ， 则 无 法 使 用 表格 排序 功能 。 
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5.5 “实战 一 一 制作 圆 角 表格 


先 把 这 个 圆 角 做 成 图 像 , 然后 插入 到 表格 中 。 下 面 通过 实例 讲述 创建 圆 角 表格 , 效果 如 图 5-38 
所 示 ， 具 体操 作 步 又 如 下 。 


| 
NT Fn, RER, EEAE, MON 


图 5-38 创建 圆 角 表 格 效果 


原始 文件 : 原始 文 件 /05/ 实 战 /index .html 
最 终 文件 ， 最 终 文件 /05/ 实 战 /index1 .html 


步骤 014 打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 如 图 5-39 所 示 。 
步骤 024 执行 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 设 置 为 3， 
“ 列 ” 设 置 为 1， 如 图 5-40 所 示 。 


Dw 
2 Rk) EE(V| A) fatM 人 IO m3(O wal) BOW) 
htm | EL CE 


1 ta 
| 扩 分 “如 | HR 司 。 蕊 。 村 时 


ap nm SEE YY ams 
图 5-39 ”打开 网 页 文档 5-40 “表格 ”对 话 框 


104 


第 5 章 使 用 表格 排版 网 页 个 ) 


步 枝 034 单 击 “确定 ”按钮 ， 插 入 表格 ， 此 表格 记 为 表格 1， 如 图 5-41 所 示 。 


me: Eh Ol-iol=] 


图 5-41 插入 表格 


步 又 044 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 单 击 “ 拆 分 单元 
格 为 列 或 行 ”按钮 ， 如 图 5-42 所 示 。 


HH 日 Ee WA RaIM WO) eo was) eCW we 
apenr Ce 


图 5-42 单 击 “ 拆 分 单元 格 为 列 或 行 ”按钮 


步骤 054M 弹出 “ 拆 分 单元 格 ”对 话 框 ， 在 对 话 框 中 “把 单元 格 拆 分 ”设置 为 “ 列 ”，“ 列 数 ” 
设置 为 2， 如 图 5-43 所 示 。 
步骤 064 单 击 “ 确 定 ”按钮 ， 将 单元 格 拆 分 为 2 列 ， 如 图 5-44 所 示 。 


本 th ot-lelL*] 
2 EN pe0n WA S46 sad eM am 
fp 和 
EE WE WEIE. .WR 更 Adobe Frchange 
殿后 
wm 
PP 
号 二 
[ = sm 
把 单元 格 拆 分 辐 行 &) 区 本 Ea 
回 列 C) F I 
列 数 C5): 2 (li) 
Cam |] eer ence er 
= = 二 
图 5-43 “ 拆 分 单元 格 ”对 话 框 5-44 ” 拆 分 单元 格 
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步骤 074 将 光标 置 于 表格 1 的 第 1 列 单元 格 中 ， 执行“ 插入 ”|“ 图 像 ”|“ 图 像 ” 命令 ,弹出 “ 选 
择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文件 dl-1.jpg， 如 图 5-45 所 示 。 
步 又 084 单 击 “ 确 定 ”按钮 ， 插 入 圆 角 图 像 ， 如 图 5-46 所 示 。 


5-45 “选择 图 像 源 文件 ”对 话 框 图 5-46 插入 圆 角 图 像 


步骤 094 将 光标 置 于 表格 的 第 1 行 第 2 列 单元 格 中 ， 打 开 代码 视图 ， 在 代码 中 输入 背景 图 像 
background=images/mail_16.jpg， 如 图 5-47 所 示 。 


on EDOCISLZD 
诡 4R m6] 村 大 M 手 A(D RN flO) S$(C) 让 5 人 OW NM 

二 et 

ME eto ess 9 国 os 


0 扮 ]W 着 各 共有 几 国 Adobe Erhange 


ja | a css mmm 


[EE 


toy Ye) fbadyy (tr> A fahlay oy) 7D mL Fer 


图 5-47 输入 代码 
步骤 10 4 返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 5-48 所 示 。 
步骤 114 将 光标 置 于 背景 图 像 上 ， 输 入 相应 的 文字 ， 如 图 5-49 所 示 。 
步骤 124 将 光标 置 于 表格 的 第 2 行 单元 格 中 ， 打 开 代码 视图 ， 在 代码 中 输入 背景 图 像 代码 
background="images/main 32.jpg"， 如 图 5-50 所 示 。 
步骤 134 返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 5-51 所 示 。 
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rr PE 
图 5-48 插入 背景 图 像 图 5-49 输入 文字 


or [Dow Pe 


HEE TT TT TREEETE 


日 


图 5-50 输入 代码 图 5-51 插入 背景 图 像 


步 最 144 将 光标 置 于 背景 图 像 上 ， 执 行 “插入 ”|“ 表 格 ”命令 , 插入 1 行 1 列 的 表格 ， 如 图 5-52 
所 示 。 
步骤 154 将 光标 置 于 刚 插入 的 表格 中 ， 输 入 相应 的 文字 ， 如 图 5-53 所 示 。 


Dw 0 ET Dw 却 - OI] 
有 MI Zio) S40 eis) WOW Mm 


Peer 了 | 国 csars 
AR | 其 4 | TH | FRR。 局。 汪 稚 只 国 sdcee Excherge 
识 5 
NA cowpanv | 


TT 于 -| 因 


Wem. 现 
PE | | 
te ee | 
A 
Pe To 
sa 下 


ER 


图 5-52 插入 表格 图 5-53 输入 文字 


步骤 164 将 光标 置 于 要 插入 图 像 的 位 置 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ”命令 ， 弹 出 “选择 图 
像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 相应 的 图 像 文件 about2.jpg， 如 图 5-54 所 示 。 


107 


( \ IT 


图 5-54 “选择 图 像 源 文 件 ” 对 话 框 
步 最 17 4 单 击 “ 确 定 ”按钮 ， 插 入 图 像 ， 如 图 5-55 所 示 。 


5-55 插入 图 像 


步骤 184 将 光标 置 于 表格 的 第 3 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 插 入 圆 角 
图 像 ， 如 图 5-56 所 示 。 


Dw me- Eh oliel | 


: [ 
by Cl lo) tr A D Chl hei 


Di 二 | 
SDOWF PT HIGNL sm7| 


图 5-56 ”插入 圆 角 图 像 
步骤 19 公 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 5-38 所 示 。 
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第 6 章 使 用 模板 和 库 快速 


创建 网 页 


本 章 导读 


本 章 主要 学 习 如 何 提高 网 页 的 制作 效率 ， 这 就 是 “模板 ”和 “ 库 ”。 它 们 不 是 网 页 设计 师 
在 设计 网 页 时 必须 要 使 用 的 技术 ,但 是 如 果 合理 地 使 用 它们 将 会 大 大 提高 工作 效率 。 灵 活 使 用 
模板 和 库 也 是 创建 整个 网 站 的 重 中 之 重 。 


@ 创建 模板 

@ 掌握 创建 可 编辑 区 域 
@ 掌握 使 用 模板 创建 网 页 
@ 掌握 创建 与 应 用 库 项 目 


当前 位 置 ， 首 页 》 案 例 展示 


TT 
zal] 


使 用 模板 创建 网 页 应 用 库 项 目 


( s IT 


利用 模板 创建 网 页 


6.1 创建 模板 


在 网 页 制作 中 很 多 劳动 是 重复 的 ， 如 页 面 的 顶部 和 底部 在 很 多 页 面 中 都 一 样 ， 而 同一 栏目 中 
除了 某 一 块 区 域外 ， 版 式 和 内 容 完 全 一 样 。 如 果 将 这 些 工作 简化 ， 就 能 够 大 幅度 提高 效率 ， 而 
Dreamweaver 中 的 模板 就 可 以 解决 这 个 问题 ， 模 板 主要 用 于 同一 栏目 中 的 页 面 制作 。 本 地 站 点 用 
到 的 所 有 模板 都 保存 在 网 站 根 目 录 下 的 Templates 文件 夹 中 ， 其 扩展 名 为 .dwt。 


6.1.1 小 实例 一 一 新 建 模板 


从 空白 文档 直接 创建 模板 的 具体 操作 步骤 如 下 。 


步骤 014 执行 “文件 ”| “新建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “空白 页 ”| 
“HTML 模板 ”|“ 无 ”选项 ， 如 图 6-1 所 示 。 
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图 6-1 “新 建文 档 ” 对 话 框 
步骤 024 单 击 “ 创 建 ” 按 钮 ， 即 可 创建 一 个 空白 模板 ， 如 图 6-2 所 示 。 


Dw mm Colsl*n 
SHA RI EEIW RAD MI WelO) S31O 5 ROW Wm 

ies x 

和 ee 

eay 目 同 EE 


图 6-2 创建 空白 模板 
步骤 034 执行 “文件 ”|“ 保 存 ”命令 ， 弹 出 Dreamweaver 提示 对 话 框 ， 如 图 6-3 所 示 。 
步骤 044M 单 击 “ 确 定 ” 按 钮 ， 弹 出 “另存 模板 ”对 话 框 ， 在 对 话 框 中 的 “另存 为 ”文本 框 中 输 
入 “Untitled-1”， 如 图 6-4 所 示 。 


另存 模板 
上: Eee====-==="] | [保生 < 
ER Ez 现存 的 模板 : | 级 有 要 要 | 
全 此 模板 不 含有 任何 可 编辑 区 域 。 您 想 继续 四? 

] 不 再 警告 我 。O) 搓 述 : 

Cm ] 另 和 有 为 | 
图 6-3 ”Dreamweaver 提示 对 话 框 图 64 “另存 模板 ”对 话 框 
步骤 05M 单 击 “ 保 存 ”按钮 ， 即 可 完成 模板 的 创建 ， 如 图 6-5 所 示 。 
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图 6-5 另存 为 模板 
6.1.2 小 实例 一 一 从 现 有 文档 创建 模板 


从 现 有 文档 中 创建 模板 的 具体 操作 步骤 如 下 。 
步骤 01 打开 网 页 文档 ， 如 图 6-6 所 示 。 
步骤 024 执行 “文件 ”| “另存 为 模板 ”命令 ， 弹 出 “另存 模板 ”对 话 框 ， 在 对 话 框 的 “站 点 ” 
下 拉 列 表 中 选择 6.1.2， 在 “另存 为 ”文本 框 中 输入 moban， 如 图 6-7 所 示 。 


动 ” Oliol x 
文件 ( 明 。 杭 咏 () 可 二 (Vv) 手 和 li) 全 t(M) 屋 KlO) (QO) SS) OW) Re(H) 
ae TE ET 


Dw 


公司 将 介 


产品 展示 。 鱼 化 弈 护 。 园林 规划 。 展销 扬 录 。 公司 党 于 


图 6-6 打开 网 页 文档 图 6-7 “另存 模板 ”对 话 框 


步 又 03M 单 击 “ 保 存 ” 按钮 ， 弹 出 Dreamweaver 提示 对 话 框 , 提示 是 否 更 新 链接 ， 如 图 6-8 所 示 。 
步骤 044M 单 击 “ 是 ”按钮 ， 即 可 将 现 有 文档 另存 为 模板 ， 如 图 6-9 所 示 . 
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6-8 ”Dreamweaver 提示 对 话 框 
六 提示 友 


图 6-9 另存 为 模板 文件 


不 要 随意 移动 模板 到 Templates 文件 夹 之 外 或 者 将 任何 非 模 板 文件 放 在 Templates 文件 夹 中 。 此 外 
不 要 将 Templates 文件 夹 移动 到 本 地 根 文件 夹 之 外 ， 以 免 引 用 模板 时 路 径 出 错 。 


6.2 ”创建 可 编辑 区 域 


可 编辑 区 域 就 是 基于 模板 文档 的 未 锁定 区 域 ， 是 网 页 套用 模板 后 可 以 编辑 的 区 域 。 在 创建 模 
板 后 , 模板 的 布局 就 固定 了 ,如 果 要 在 模板 中 针对 某 些 内 容 进 行 修改 , 则 为 该 内 容 创 建 可 编辑 区 。 


6.2.1 小 实例 一 一 插入 可 编辑 区 域 


创建 可 编辑 区 域 的 具体 操作 步骤 如 下 。 


步骤 01 打开 网 页 文档 ， 将 光标 置 于 要 创建 可 编辑 区 域 的 位 置 ， 如 图 6-10 所 示 。 


步 台 024 执行 “ 括 入 ”|“ 模 板 ”|“ 可 编辑 区 域 ” 命 令 ， 弹 出 “新 建 可 编辑 区 域 ” 对 话 框 ， 如 图 
6-11 所 示 。 


Dw CE KE 
2 ml Ea SI fin nol eol0 wa 和 
一 站 


| fr: 
此 区 域 格 可 以 在 基于 该 模板 的 文档 
中 进行 编辑 。 


图 6-10 打开 网 页 文档 图 6-11 “新 建 可 编辑 区 域 ”对 话 框 
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步骤 034 单 击 “ 确 定 ”按钮 ， 创 建 可 编辑 区 域 ， 如 图 6-12 所 示 。 


Dw 五 -| 国 OLIeLxj 


纯化 卉 护 。 园林 规划 。 虹 馆 务 半 公司 得 


可 国 面 | ss sa 


图 6-12 创建 可 编辑 区 域 
友 提示 六 
单 击 “模板 ”插入 栏 中 的 按钮 铝 ， 也 可 以 弹出 “新 建 可 编辑 区 域 ” 对 话 框 ， 创 建 可 编辑 区 域 。 


6.2.2 ”删除 可 编辑 区 域 


选中 要 删除 的 可 编辑 区 域 标 记 ， 执 行 “ 修 改 ”| “模板 ” |“ 删除 模板 标记 ”命令 ， 即 可 删除 模 
板 区 域 ， 如 图 6-13 所 示 。 
Dw Be-. BB ol-Iol x /| 


Zn) wy sev mn BER eol eslO < BOW we 
pebandnt » Fe 站- 二 一 芝 


图 6-13 执行 “删除 模板 标记 ”命令 


6.3 ”使 用 模板 创建 网 页 


模板 创建 好 之 后 ， 就 可 以 应 用 模板 快速 、 高 效 地 设计 风格 一 致 的 网 页 。 下 面 通 过 如 图 6-14 
所 示 的 效果 讲述 应 用 模板 创建 网 页 ， 具 体操 作 步 又 如 下 。 
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图 6-14 ”利用 模板 创建 网 页 


原始 文件 ， 原 始 文 件 /06/6.3/Templates/moban.dwt 
最 终 文件 ， 最 终 文件 /06/6.3/index1 .html 


太 提示 六 


在 创建 模板 时 ， 可 编辑 区 域 和 锁定 区 域 都 可 以 进行 修改 . 但 是 ， 在 利用 模版 创建 的 网 页 中 ， 只 能 在 可 

编辑 区 域 中 进行 更 改 ， 而 无 法 修改 锁定 区 域 中 的 内 容 。 

步骤 01 执行 “文件 ”| “新建” 命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “网 站 模板 ” 
| 6.3 | moban 命令 ， 如 图 6-15 所 示 。 
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6-15 “新 建文 档 ” 对 话 框 
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步骤 02 单 击 “ 创 建 ”按钮 ， 利 用 模板 创建 网 页 ， 如 图 6-16 所 示 。 
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图 6-16 利用 模板 创建 网 页 


步 又 034 执行 “文件 ”| “保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”文本 
框 中 输入 名 称 ， 如 图 6-17 所 示 。 
步 最 044 单 击 “保存 ”按钮 ， 保 存 文 档 ， 将 光标 置 于 可 编辑 区 域 中 ， 执 行 “插入 ”| “表格 ” 命 
令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 设 置 为 2，“ 列 ”设置 为 1，“ 表 格 
宽度 ”设置 为 100%， 如 图 6-18 所 示 。 
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图 6-17 “另存 为 ”对 话 框 
步骤 054M 单 击 “确定 ”按钮 ， 插 入 表格 ， 如 图 6-19 所 示 。 
步骤 064 将 光标 置 于 表格 的 第 1 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ”命令 ， 插 入 图 像 

images/jiajie.gif， 如 图 6-20 所 示 。 


图 6-18 “表格 ”对 话 框 
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图 6-19 插入 表格 图 6-20 “选择 图 像 源 文件 ”对 话 杠 
步骤 07 4 单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 6-21 所 示 。 


on TY 


6-21 插入 图 像 


步骤 084 将 光标 置 于 表格 的 第 2 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ”命令 ， 插 入 1 行 1 列 的 表 
格 ， 如 图 6-22 所 示 。 
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图 6-22 插入 表格 
步 最 094 将 光标 置 于 表格 的 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 6-23 所 示 。 
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6-23 输入 文字 


步 昧 104 将 光标 置 于 文字 中 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ” 命令， 弹出 “选择 图 像 源 文件 ” 
对 话 框 ， 在 对 话 框 中 选择 图 像 文件 images/huayijpg， 如 图 6-24 所 示 。 


图 6-24 “选择 图 像 源 文件 ”对 话 框 
步骤 114 单 击 “ 确 定 ”按钮 ， 插 入 图 像 ， 如 图 6-25 所 示 。 


步骤 124 选中 插入 的 图 像 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ”命令 ， 
如 图 6-26 所 示 。 
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图 6-25 插入 图 像 图 6-26 ”设置 对 齐 方式 
步骤 134 单 击 “保存 ”按钮 ， 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 6-14 所 示 。 
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6.4 ”创建 与 应 用 库 项 目 


在 Dreamweaver 中 ， 另 一 种 维护 文档 风格 的 方法 是 使 用 库 项 目 。 如 果 说 模板 从 整体 上 控制 了 
文档 风格 的 话 ， 库 项 目 从 局 部 上 维护 了 文档 的 风格 。 

库 是 一 种 用 来 存储 想 要 在 整个 网 站 上 经 常 重复 使 用 或 更 新 的 页 面 元 素 ( 如 图 像 、 文 本 和 其 他 
对 象 ) 的 方法 ， 这 些 元 素 称 为 库 项 目 。 


6.4.1 小 实例 一 一 创建 库 项 目 


可 以 先 创建 新 的 库 项 目 , 然后 编辑 其 中 的 内 容 , 也 可 以 将 文档 内 选中 的 内 容 作为 库 项 目 保存 。 
如 果 使 用 了 库 ， 就 可 以 通过 改动 库 更 新 所 有 采用 库 的 网 页 ， 不 用 一 个 一 个 的 修改 网 页 元 素 或 重新 
制作 网 页 。 创 建 库 项 目的 效果 如 图 6-27 所 示 ， 有 具体 操作 步骤 如 下 。 


图 6-27 库 项 目 效果 
最 终 文件 ， 最 终 文件 /06/6.4.1/top.1bi 
步 又 014 执行 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “空白 页 ” 
中 的 “ 库 项 目 ” 选 项 ， 如 图 6-28 所 示 。 
步骤 024 单 击 “创建 ”按钮 ， 创 建 一 个 库 文档 ， 如 图 6-29 所 示 。 
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图 6-28 “新 建文 档 ” 对 话 框 6-29 创建 库 文档 


步 双 034 执行 “文件 ”|“ 另 存 为 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 的 “保存 类 型 ”下 
拉 列 表 中 选择 “ 库 文件 (.Ibi) ”， 在 “文件 名 ”文本 框 中 输入 top.Ibi， 如 图 6-30 所 示 。 
步骤 044M 单 击 “ 保 存 ”按钮 ， 保 存 库 文档 。 将 光标 置 于 文档 中 ， 执 行 “插入 ”|“ 表 格 ”命令 ， 
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弹出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ”设置 为 1，“ 列 ”设置 为 1，“ 表 格 宽度 ” 
设置 为 984 像素 ， 如 图 6-31 所 示 。 
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图 6-30 “另存 为 ”对 话 框 图 6-31 “表格 ”对 话 杠 


步骤 054 单 击 “ 确 定 ”按钮 ， 插 入 表格 ， 如 图 6-32 所 示 。 
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图 6-32 插入 表格 
步骤 064 将 光标 置 于 表格 的 第 1 行 单元 格 中 ， 执 行 “插入 ”| “图像 ”|“ 图 像 ”命令 ， 弹 出 “ 选 


择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文 件 images/topjpg， 如 图 6-33 所 示 。 
步 又 07 4 单 击 “ 确 定 ”按钮 ， 插 入 图 像 ， 如 图 6-34 所 示 。 
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图 6-33 “选择 图 像 源 文件 ”对 话 框 6-34 插入 图 像 
步骤 08 4 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 6-27 所 示 。 


aa 的 一 
6.4.2 ”小 实例 一 一 应 用 库 项 目 


使 用 库 比 使 用 模板 具有 更 大 的 灵活 性 。 创 建 库 项 目 后 ， 就 可 以 将 其 插入 到 其 他 网 页 中 。 下 面 
在 如 图 6-35 所 示 的 网 页 中 应 用 库 文件 ， 具 体操 作 步 骤 如 下 


当前 位 置 : 首页 》 案 例 展示 


| 


图 6-35 在 网 页 中 应 用 库 项 目 
原始 文件 : 原始 文件 /06/6.4.2/index.html 


最 终 文件 : 最 终 文件 /06/6.4.2/indexl html 
步 台 01 打开 网 页 文档 ， 如 图 6-36 所 示 
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图 6-36 打开 网 页 文档 
步骤 024 执行 “窗口 ”|“ 资 源 ” 命 令 ， 打 开 “ 资 源 ”面板 ， 在 面板 中 单 击 “ 库 ”按钮 加， 显示 
库 项 目 ， 如 图 6-37 所 示 。 
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6-37 显示 库 项 目 


步 又 034 将 光标 置 于 要 插入 库 的 位 置 ， 选 中 库 top， 单 击 左下 角 的 “插入 ”按钮 C 蚤 J]， 插 入 
库 项 目 ， 如 图 6-38 所 示 。 
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当前 位 置 : 首页 > 案例 展示 


图 6-38 插入 库 项 目 
友 高 手 支 招 女 


如 果 希 望 仅仅 添加 库 项 目 内 容 对 应 的 代码 ， 而 不 希望 它 作为 库 项 目 出 现 , 则 可 以 按 住 Ctrl 键 , 再 将 相 
应 的 库 项 目 从 “资源 ”面板 中 拖 到 文档 窗口 。 这样， 插入 的 内 容 就 以 普通 文档 的 形式 出 现 。 


步 野 044 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 6-35 所 示 。 
6.4.3 ”小 实例 一 一 修改 库 项 目 


通过 修改 某 个 库 项 目 来 改变 整个 站 点 中 所 有 应 用 该 库 项 目的 文档 ， 实 现 统一 更 新 文档 风格 。 
步骤 014 打开 库 文件 ， 选 中 图 像 ， 如 图 6-39 所 示 。 
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图 6-39 打开 库 文件 


步 野 024 打开 “属性 ”面板 ， 在 面板 中 选择 矩形 热点 工具 ， 如 图 6-40 所 示 。 
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图 6-40 选择 矩形 热点 工具 


步 野 034 将 光标 置 于 “网 站 首页 ”图 像 上 ， 绘 制 矩 形 热 点 ， 并 在 “属性 ”面板 中 输入 相应 的 链 
接 ， 如 图 6-41 所 示 。 
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图 641 绘制 矩形 热点 
步骤 044M 同 理 ， 在 其 他 的 图 像 上 绘制 矩形 热点 ， 并 输入 相应 的 链接 ， 如 图 6-42 所 示 。 
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图 6-42 ”绘制 矩形 热点 


步 又 054 保存 库 文 件 ， 执 行 “修改 ”|“ 库 ”|“ 更 新 页 面 ”命令 ， 弹 出 “更 新 页 面 ”对 话 框 ， 如 
图 6-43 所 示 。 
步骤 064 单 击 “开始 ”按钮 ， 即 可 按照 提示 更 新 文件 ， 如 图 6-44 所 示 。 
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图 6-43 “更 新 页 面 ” 对 话 框 图 6-44 显示 已 更 新 文件 


步骤 07M 打开 应 用 库 项 目的 文件 ， 可 以 看 到 文件 已 经 被 更 新 ， 如 图 6-45 所 示 。 
珊 - llel x 
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6-45 更 新 应 用 库 项 目的 文档 
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6.5 ”实战 


在 网 页 中 使 用 模板 可 以 统一 整个 站 点 的 页 面 风格 ,使 用 库 项 目 可 以 对 页 面 的 局 部 统一 风格 。 
在 制作 网 页 时 使 用 库 和 模板 可 以 节省 大 量 的 工作 时 间 ， 并 且 对 日 后 的 升级 带 来 很 大 的 方便 。 下 面 
通过 实例 讲述 模板 的 创建 和 应 用 。 


实战 1 一 一 创建 模板 
创建 企业 网 站 模板 的 效果 如 图 6-46 所 示 ， 具 体操 作 步骤 如 下 。 


好 口福 快餐 店 


jm 


图 6-46 企业 网 站 模板 效果 
最 终 文件 ， 最 终 文件 /06/ 实 战 1/moban .dwt 

步骤 014 执行 “文件 ”| “新建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “空白 页 ”| 
“HTML 模板 ”|“ 无 ”选项 。 

步骤 024 单 击 “ 创 建 ” 按 钮 ， 创 建 空 白文 档 网 页 。 

步 野 034 执行 “文件 ” |“ 保存 ”命令 ， 弹 出 “Dreamweaver” 提 示 对 话 框 。 

步 野 044 单 击 “ 确 定 ”按钮 ， 弹 出 “另存 模板 ”对 话 框 ， 在 对 话 框 的 “另存 为 ”文本 框 中 输入 
名 称 ， 如 图 6-47 所 示 。 
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647 “另存 模板 ”对 话 框 


步骤 05 公 单 击 “ 保 存 ” 按 钮 ， 保 存 模板 文档 。 将 光标 置 于 页 面 中 ， 执 行 “ 修 改 ”|“ 页 面 属性 ” 
命令 ， 弹 出 “页 面 属性 ”对 话 框 ， 在 对 话 框 中 将 “上 边 距 ”、“ 下 边 距 ”、“ 左 边 距 ”、 
“右边 距 ” 分 别 设 置 为 0， 如 图 6-48 所 示 。 
步骤 064 单 击 “确定 ”按钮 ， 修 改 页 面 属性 ， 将 光标 置 于 页 面 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 
弹出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ”设置 为 5，“ 列 ”设置 为 1，“ 表 格 宽度 ” 
设置 为 1006 像素 ， 如 图 6-49 所 示 。 
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图 6-48 “页 面 属性 ”对 话 框 图 6-49 “表格 ”对 话 框 
步 又 07 4 单 击 “ 确 定 ”按钮 ， 插 入 表格 ， 此 表格 标记 为 表格 1， 如 图 6-50 所 示 。 
步骤 08 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ,执行 “插入 ”| “图像 ”| “图像” 命令 ,弹出 “ 先 
择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 相应 的 图 像 文件 ../images/topjpg， 如 图 6-51 


所 示 。 
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图 6-50 插入 表格 1 6-51 “选择 图 像 源 文件 ”对 话 框 
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步 双 09 和 人 单 击 “ 确 定 ”按钮 ， 插 入 图 像 文 件 ， 如 图 6-52 所 示 。 
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图 6-52 插入 图 像 文件 


步骤 104 将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 打 开 代码 视图 ， 在 代码 中 输入 背景 图 像 代码 
background=../images/navbg.jpg， 如 图 6-53 所 示 。 
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图 6-53 输入 代码 
步骤 114 返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 6-54 所 示 。 
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6-54 插入 背景 图 像 
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步骤 12 将 光标 置 于 背景 图 像 上 ， 插 入 1 行 6 列 的 表格 ， 此 表格 标记 为 表格 2， 如 图 6-55 所 示 。 
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图 6-55 插入 表格 2 


步 又 134 将 光标 置 于 表格 2 的 第 1 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 图 像 ” | “图像 ”命令 ,插入 图 
像 .Jimages/nav1jpg， 如 图 6-56 所 示 。 
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图 6-56 插入 图 像 
步骤 144 重复 步骤 13， 在 表格 2 的 其 他 单元 格 中 也 分 别 插入 相应 的 图 像 ， 如 图 6-57 所 示 。 
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6-57 插入 图 像 
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步骤 154 将 光标 置 于 表格 1 的 第 3 行 单元 格 中 ， 打 开 代码 视图 ， 在 代码 中 输入 背景 图 像 代 码 
background=../images/banner.jpg， 如 图 6-58 所 示 。 
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图 6-58 输入 代码 
步骤 16 返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 6-59 所 示 。 
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图 6-59 插入 背景 图 像 


步骤 17 4 将 光标 置 于 表格 1 的 第 4 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ”命令 ， 插 入 1 行 2 列 的 
表格 ， 此 表格 标记 为 表格 3， 如 图 6-60 所 示 。 
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6-60 ”插入 表格 3 
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步骤 184 将 光标 置 于 表格 3 的 第 1 列 单元 格 中 ， 打 开 代码 视图 ， 在 代码 中 输入 背景 图 像 代 码 
background=../images/leftbg.jpg， 如 图 6-61 所 示 。 


六 |， 
fp ot to lo pn 


图 6-61 输入 代码 
步 台 19 和 返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 6-62 所 示 。 
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图 6-62 插入 背景 图 像 


步骤 204 将 光标 置 于 背景 图 像 上 ， 执 行 “插入 ”|“ 表 格 ”命令 ， 插 入 2 行 1 列 的 表格 ， 此 表格 
记 为 表格 4， 如 图 6-63 所 示 。 


图 6-63 插入 表格 4 
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步骤 21 将 光标 置 于 表格 4 的 第 1 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 插 入 2 行 1 列 的 
表格 ， 此 表格 标记 为 表格 5， 如 图 6-64 所 示 。 


Ea EE 


6-64 插入 表格 5 


步骤 224 将 光标 置 于 表格 5 的 第 1 行 单元 格 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ”命令 ,插入 图 
像 ../images/nei about.jpg， 如 图 6-65 所 示 。 
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6-65 插入 图 像 


步骤 234 将 光标 置 于 表格 5 的 第 2 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 插 入 3 行 1 列 的 
表格 ， 此 表格 标记 为 表格 6， 如 图 6-66 所 示 。 
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图 6-66 插入 表格 6 


131 


( s IT 


步骤 24 将 光标 置 于 表格 6 的 单元 格 中 分 别 输入 相应 的 文字 ， 如 图 6-67 所 示 。 
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图 6-67 输入 文字 


步骤 254 将 光标 置 于 表格 4 的 第 2 行 单元 格 中 ， 执 行 “插入 ”|“ 表 格 ”命令 ,插入 2 行 1 列 的 
表格 ， 此 表格 标记 为 表格 7， 如 图 6-68 所 示 。 


图 6-68 插入 表格 7 


步 又 264 将 光标 置 于 表格 7 的 第 1 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ”命令 ， 插 入 图 
像 .images/wenhuatop.jpg， 如 图 6-69 所 示 。 


| 


图 6-69 插入 图 像 
步骤 274 将 光标 置 于 表格 7 的 2 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 插 入 8 行 1 列 的 表 
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格 ， 此 表格 标记 为 表格 8， 如 图 6-70 所 示 。 


图 6-70 插入 表格 8 
步骤 284 在 表格 8 的 单元 格 中 ， 分 别 输入 相应 的 文字 ， 如 图 6-71 所 示 。 


| 


DA A DA ac dom 而 


6-71 输入 文字 


步骤 29 将 光标 置 于 表格 3 的 第 2 列 单元 格 中 ， 执 行 “插入 ”| “模板 对 象 ”|“ 可 编辑 区 域 ” 命 
令 ， 弹 出 “新 建 可 编辑 区 域 ”对 话 框 ， 在 对 话 框 的 “名 称 ”文本 框 中 输入 名 称 ， 如 图 
6-72 所 示 。 

步 又 30 4 单 击 “ 确 定 ”按钮 ， 插 入 可 编辑 区 域 ， 如 图 6-73 所 示 。 


de 


新 绍 可 篇 加 区 域 | | 
| [El 
图 6-72 “新 建 可 编辑 区 域 ”对 话 框 6-73 插入 可 编辑 区 域 
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步骤 314 将 光标 置 于 表格 1 的 第 5 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 插 入 1 行 2 列 的 
表格 ， 此 表格 记 为 表格 9， 如 图 6-74 所 示 。 


5] l=lel x] 
nm 


RE eh, ka 
图 6-74 插入 表格 9 


步骤 32 将 光标 置 于 表格 9 的 第 1 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ”命令 ， 插 入 图 
像 .images/bottomleftjpg， 如 图 6-75 所 示 。 


6-75 插入 图 像 


步骤 334 将 光标 置 于 表格 9 的 第 2 列 单元 格 中 ， 将 单元 格 “ 颜 色 ” 设 置 为 “j#dcc3a9”， 并 输入 
相应 的 文字 ， 如 图 6-76 所 示 。 
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6-76 输入 文字 
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步骤 344 保存 模板 文档 ， 完 成 模板 的 制作 ， 效 果 如 图 6-46 所 示 。 
实战 2 一 一 利用 模板 创建 网 页 


利用 模板 创建 网 页 效果 如 图 6-77 所 示 ， 具 体操 作 步 骤 如 下 。 


归口 福 快 将 店 


图 6-77 利用 模板 创建 网 页 效果 
原始 文件 ， 原 始 文 件 /06/ 实 战 2/moban .dwt 
最 终 文件 ， 最 终 文件 /06/ 实 战 2/index1 .html 
步 台 01 执行 “文件 ” |“ 新建” 命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 选 择 “网 站 模板 ”|“ 站 点 实 
战 2”|“moban” 选 项 ， 如 图 6-78 所 示 。 
步骤 024 单 击 “ 创 建 ”按钮 ， 利 用 模板 创建 文档 ， 如 图 6-79 所 示 。 
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图 6-78 “新 建文 档 ” 对 话 框 6-79 利用 模板 创建 文档 
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步 票 034 执行 “文件 ” |“ 保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”文本 
框 中 输入 名 称 ， 如 图 6-80 所 示 。 
步骤 044 单 击 “ 保 存 ” 命 令 ， 保 存 文 档 。 将 光标 置 于 可 编辑 区 域 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 
令 , 插入 2 行 1 列 的 表格 ， 此 表格 标记 为 表格 1， 如 图 6-81 所 示 。 
二 


图 6-80 “另存 为 ”对 话 框 图 6-81 插入 表格 1 


步骤 054 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 打 开 代码 视图 ， 在 代码 中 输入 背景 图 像 代 码 
background=images/righttitle.jpg， 如 图 6-82 所 示 。 


Dw Bs. Go-e x| 
文人 f 朋 。 奖 压 5 二 三 V) 插入 则 侣 汉 (M) 计 KIO) 疗 $(Q 小 (5) 二 GDIW) 才 DIH) 
Iinoexi htm x TT EE 
rn J] 

tee | 


table width="1e0k" cett 


Ea 


atiaataee itlle) Ale uD 


图 6-82 输入 代码 
步骤 06M 返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 6-83 所 示 。 
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图 6-83 ”插入 背景 图 像 


步骤 07 人 将 光标 置 于 背景 图 像 上 ， 输 入 相应 的 文字 ， 如 图 6-84 所 示 。 
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6-84 输入 文字 


步骤 08 将 光标 置 于 表格 的 第 2 行 单元 格 中 ， 将 单元 格 的 “背景 颜色 ”设置 为 下 7F1EC， 如 图 


6-85 所 示 。 
Ee EO-iel x | 


于 内 ! - 
nC 
5 


己 坏 有 makh 总 中 放量 四 一 


6-85 ”设置 单元 格 的 背景 颜色 
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步骤 094 设置 单元 格 属性 后 ， 执 行 “ 插 入 ”| “表格 ”命令 ， 插 入 1 行 1 列 的 表格 ， 如 图 6-86 所 示 。 
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图 6-86 插入 表格 
步骤 104 将 光标 置 于 刚 插入 的 表格 中 ， 输 入 相应 的 文字 ， 如 图 6-87 所 示 。 
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6-87 输入 文字 


步 骂 114 将 光标 置 于 文字 中 ， 执 行 “插入 ”| “图像 ”|“ 图 像 ”命令 ， 插 入 图 像 images/tu2.jpg， 
如 图 6-88 所 示 。 
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6-88 插入 图 像 
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步 又 124 选中 插入 的 图 像 ， 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ”命令 ， 
如 图 6-89 所 示 。 


吉事 人 万 时 址 时， 上 报 上 条 号。 


DT | 


图 6-89 设置 图 像 对 齐 方式 
步骤 13 人 保存 文档 ， 完 成 模板 的 制作 ， 效 果 如 图 6-77 所 示 。 
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特效 网 页 


本 章 导读 


Dreamweaver CC 提供 了 快速 制作 网 页 特效 的 行为 ， 可 以 让 即使 不 会 编程 的 设计 者 也 能 制 
作出 漂亮 的 特效 ， 本 章 将 学 习 行为 的 使 用 。 
@ 了 解 行为 和 事件 
@ 掌握 行为 的 添加 与 编辑 
@ 掌握 使 用 Dreamweaver 内 置 行为 
@ 掌握 使 用 JavaScript 制作 网 页 特效 


实例 展示 


鼠标 经 过 图 像 前 的 效果 鼠标 经 过 图 像 时 的 效果 


第 7 章 使 用 行为 设计 动态 特效 网 页 (9 


牡丹 大 酒店 i FR ss 


打开 浏览 器 窗口 弹出 信息 
7.1 了 解 行为 
在 Dreamweaver 中 ， 行 为 是 事件 和 动作 的 组 合 。 事 件 是 特定 的 时 间或 是 用 户 在 某 时 所 发 出 的 
指令 后 紧 接着 发 生 的， 而 动作 是 事件 发 生 后 网 页 所 要 做 出 的 反应 。 
7.1.1 动作 


所 谓 的 动作 就 是 设置 交换 图 像 、 弹 出 信息 等 特殊 的 JavaScript 效果 。 在 设 定 的 事件 发 生 时 运 
行动 作 。 表 7-1 列 出 了 Dreamweaver 中 默认 提供 的 动作 种 类 。 


表 7-1 ， Dreamweaver 中 常见 的 动作 


动作 种 类 说 明 

弹出 消息 设置 的 事件 发 生 之 后 ， 显 示警 告 信息 

交换 图 像 发 生 设置 的 事件 后 ， 用 其 他 图 片 来 取代 选 定 的 图 片 
恢复 交换 图 像 在 运用 交换 图 像 动 作 之 后 ， 显 示 原 来 的 图 片 

打开 浏览 器 窗口 在 新 窗口 中 打开 

拖 动 AP 元 素 允许 在 浏览 器 中 自由 拖 动 AP 元 素 

转 到 URL 可 以 转 到 特定 的 站 点 或 者 网 页 文档 上 
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( 续 表 ) 
动作 种 类 说 明 
检查 表单 检查 表单 文档 有 效 性 的 时 候 使 用 
调用 JavaScript 调用 JavaScript 特定 函数 
改变 属性 改变 选 定 对 象 的 属性 
跳 转 菜单 可 以 建立 若干 个 链接 的 跳 转 菜单 
, i 画 请 
跳 转 菜单 开始 pir 只 有 单 击 按钮 才 可 以 移动 到 链接 
预先 载 入 图 像 为 了 在 浏览 器 中 快速 显示 图 片 ， 事 先 下 载 图 片 之 后 显示 出 来 
设置 框架 文本 在 选 定 的 框架 上 显示 指定 的 内 容 
设置 文本 域 文字 在 文本 字段 区 域 显示 指定 的 内 容 
设置 容器 中 的 文本 在 选 定 的 容器 上 显示 指定 的 内 容 
设置 状态 栏 文本 在 状态 栏 中 显示 指定 的 内 容 
显示 -隐藏 AP 元 素 显示 或 隐藏 特定 的 AP 元 素 


7.1.2 事件 


事件 就 是 在 特定 情况 下 发 生 选 定 行为 动作 的 功能 。 例如， 如 果 运 用 了 单 击 图 片 之 后 转移 到 特 
定 站 点 上 的 行为 , 这 是 因为 事件 被 指定 了 onClick, 所 以 执行 了 在 单 击 图 片 的 一 瞬间 转移 到 其 他 站 
点 的 这 一 动作 。 表 7-2 所 示 的 是 Dreamweaver 中 常见 的 事件 。 


表 7-2 Dreamweaver 中 常见 的 事件 


onAbort 在 浏览 器 窗口 中 停止 加 载 网 页 文档 的 操作 时 发 生 的 事件 
onMove 移动 窗口 或 者 框架 时 发 生 的 事件 

onLoad 选 定 的 对 象 出 现在 浏览 器 上 时 发 生 的 事件 

onResize 访问 者 改变 窗口 或 帧 的 大 小 时 发 生 的 事件 

onUnLoad 访问 者 退出 网 页 文档 时 发 生 的 事件 

onClick 用 鼠标 单 击 选 定 元 素 的 一 瞬间 发 生 的 事件 

onBlur 鼠标 指针 移动 到 窗口 或 帧 外 部 ， 即 在 这 种 非 激活 状态 下 发 生 的 事件 
onDragDrop 拖 动 并 放置 选 定 元 素 的 那 一 瞬间 发 生 的 事件 
onDragStart 拖 动 选 定 元 素 的 那 一 瞬间 发 生 的 事件 

onFocus 鼠标 指针 移动 到 窗口 或 帧 上 ， 即 激活 之 后 发 生 的 事件 
onMouseDown 单 击 鼠 标 右键 一 瞬间 发 生 的 事件 

onMouseMove 鼠标 指针 指向 字段 并 在 字段 内 移动 

onMouseOnut 鼠标 指针 经 过 选 定 元 素 之 外 时 发 生 的 事件 
onMouseOver 鼠标 指针 经 过 选 定 元 素 上 方 时 发 生 的 事件 

onMouseUp 单 击 鼠 标 右键 ， 然 后 释放 时 发 生 的 事件 

onScroll 访问 者 在 浏览 器 上 移动 滚动 条 的 时 候 发 生 的 事件 
onKeyDown 当 访 问 者 按 下 任意 键 时 产生 


‘onKeyPress 当 访 问 者 按 下 和 释放 任意 键 时 产生 
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( 续 表 ) 
事件 说 明 
onKeyUp 在 键盘 上 按 下 特定 键 并 释放 时 发 生 的 事件 
onAfterUpdate 更 新 表单 文档 内 容 时 发 生 的 事件 
onBeforeUpdate 改变 表单 文档 项 目 时 发 生 的 事件 
onChange 访问 者 修改 表单 文档 的 初始 值 时 发 生 的 事件 
onReset 将 表单 文档 重 设置 为 初始 值 时 发 生 的 事件 
onSubmit 访问 者 传送 表单 文档 时 发 生 的 事件 
onSelect 访问 者 选 定 文本 字段 中 的 内 容 时 发 生 的 事件 
onError 在 加 载 文档 的 过 程 中 ， 出 现 错误 时 发 生 的 事件 
onFilterChange 运用 于 选 定 元 素 的 字段 变化 时 发 生 的 事件 
Onfinish Marquee 用 功能 来 显示 的 内 容 结束 时 发 生 的 事件 


Onstart Marquee 开始 应 用 功能 时 发 生 的 事件 


7.2 行为 的 添加 与 编辑 


在 Dreamweaver CC 中 ， 进 行 附加 行为 和 编辑 行为 的 操作 都 将 使 用 到 “行为 ”面板 ， 在 “ 行 
为 ”面板 中 可 以 添加 行为 、 删 除 行为 等 。 


7.2.1 行为 的 添加 
对 页 面 中 的 对 象 附加 行为 的 具体 操作 步骤 如 下 。 


步骤 014 在 网 页 编辑 窗口 中 ， 选 择 需要 为 其 附加 行为 的 对 象 ， 如 图 像 或 链接 等 。 
步骤 024 执行 “窗口 ” |“ 行为 ”命令 ， 打 开 “ 行 为 ”面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 
在 弹出 的 下 拉 菜 单 中 显示 当前 可 以 添加 的 所 有 行为 ， 如 图 7-1 所 示 。 


7-1 系统 内 置 的 所 有 行为 
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步骤 03 当选 择 动作 时 ， 会 弹出 一 个 参数 对 话 框 ， 设 置 完成 后 单 击 “ 确 定 ”按钮 。 

步 最 044 这 时 ， 在 “行为 ”面板 的 列表 中 将 显示 添加 的 事件 和 对 应 的 动作 。 如 果 该 事件 不 是 
所 需 的 事件 ， 可 以 单 击 事件 列表 的 下 箭头 ， 打 开 事件 下 拉 菜单 ， 从 中 选择 一 个 需要 
的 事件 。 


7.2.2 行为 的 修改 


前 面 讲述 了 添加 行为 和 使 用 行为 ， 下 面 我 们 对 已 经 添加 的 行为 进行 编辑 或 者 删除 ， 编 辑 行为 
的 具体 步骤 如 下 。 
步骤 01 在 网 页 文档 中 选择 已 经 添加 了 行为 的 某 个 元 素 和 对 象 ， 在 “行为 ”面板 中 可 以 显示 所 
有 已 经 附加 到 该 元 素 或 对 象 的 行为 。 
步 野 024 选择 要 编辑 的 行为 ， 如 果 要 更 改 该 行为 的 事件 ， 单 击 事 件 栏 右 侧 的 按钮 ， 弹 出 事件 下 
拉 菜 单 ， 在 下 拉 菜 单 中 更 改 为 所 需要 的 事件 。 
如 果 要 编辑 该 行为 的 动作 ， 则 双击 该 行为 ， 可 以 看 到 对 应 的 动作 对 话 框 ， 然 后 在 对 话 框 中 根 
如 果 要 改变 该 行为 在 多 个 行为 中 的 发 生 顺 序 ， 单 击 “ 行 为 ”面板 右上 角 的 黑 三 角 按 钮 《只 有 
当 所 选 元 素 或 对 象 添加 了 多 个 基于 同一 事件 的 不 同 或 相同 动作 时 , 才 可 以 使 用 此 方法 ), 然后 可 以 
根据 需要 更 改行 为 的 发 生 顺 序 。 
如 果 要 删除 该 行为 ， 则 先 选中 该 行为 ， 然 后 单 击 “ 行 为 ”面板 中 的 蕊 按钮 ， 如 图 7-2 所 示 。 


7-2 ”删除 行为 


7.3 ”使 用 Dreamweaver 内 置 行为 


Dreamweaver 内 置 了 很 多 种 行为 ， 这 些 行 为 是 为 在 IE 4.0 或 更 高 版 本 中 使 用 而 编写 的 。 用 户 
利用 这 些 内 置 行为 可 以 不 用 编写 代码 就 能 轻松 地 制作 出 各 种 特效 网 页 。 
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7.3.1 小 实例 一 一 交换 图 像 


“交换 图 像 ”动作 是 将 一 幅 图 像 蔡 换 成 另外 一 幅 图 像 ， 一 个 交换 图 像 其 实 是 由 两 幅 图 像 组 成 
的 。 下 面 通过 实例 讲述 创建 交换 图 像 ， 鼠 标 未 经 过 图 像 时 的 效果 如 图 7-3 所 示 ， 当 鼠标 经 过 图 像 
时 的 效果 如 图 7-4 所 示 ， 具 体操 作 步 骤 如 下 。 


图 7-3 ”鼠标 未 经 过 图 像 时 的 效果 图 7-4 鼠标 经 过 图 像 时 的 效果 


原始 文件 ， 原始 文件 /07/7.3.1/index.htm 
最 终 文件 ， 最 终 文件 /07/7.3.1/index1l1 .htm 
步骤 014 打开 网 页 文档 ， 选 中 图 像 ， 如 图 7-5 所 示 。 
步 又 024 执行 “窗口 ” |“ 行为 ”命令 ， 打 开 “ 行 为 ”面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 因由， 
在 弹出 的 菜单 中 选择 “交换 图 像 ” 选 项 ， 如 图 7-6 所 示 。 


Dw 号 .| 国 OL=IslLz= 
Dw | 日 FE SAD BoM WlO) S50 ec) WOW mm 
tee 


7-5 打开 网 页 文档 图 7-6 选择 “交换 图 像 ”选项 


步骤 034 弹出 “交换 图 像 ” 对 话 框 ， 在 “图 像 ” 名 称 栏 中 选择 交换 图 像 的 名 称 ， 在 对 话 框 中 单 
击 “ 设 定 原始 档 为 ”文本 框 右边 的 “浏览 ”按钮 ， 如 图 7-7 所 示 。 
步 肾 04 公 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 要 交换 的 图 像 images/tu2jpg， 如 图 7-8 所 示 。 
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图 7-7 “交换 图 像 ”对 话 框 7-8 “选择 图 像 源 文件 ”对 话 框 
六 指点 迷津 克 
“交换 图 像 ”对 话 框 中 可 以 进行 如 下 设置 。 


。 图 像 : 在 列表 中 选择 要 更 改 的 图 像 。 

。 设 定 原始 档 为 : 单 击 “ 浏 览 ”按钮 选择 新 图 像 文 件 ， 文 本 框 中 显示 新 图 像 的 路 径 和 文件 名 。 

。 预先 载 入 图 像 : 勾 选 该 复 选 框 ， 这 样 在 载 入 网 页 时 ， 新 图 像 将 载 入 到 浏览 器 的 缓冲 区 中 ， 防 止 当 
图 像 应 该 出 现时 由 于 下 载 而 导致 的 延迟 。 

。 鼠标 滑 开 时 恢复 图 像 : 勾 选 该 复 选 框 ， 表 示 当 鼠标 离开 图 片 时 ， 图 片 会 自动 恢复 为 原始 图 像 。 


步 又 05 4 单 击 “ 确 定 ”按钮 ， 添 加 到 文本 框 中 ， 如 图 7-9 所 示 。 
步骤 064 单 击 “ 确 定 ”按钮 ， 添 加 行为 到 “行为 ”面板 中 ， 如 图 7-10 所 示 。 


Dw CE EN| 
Ae SE SE Nn We Wol S40 地 网 suny 


以 定 原 析 档 为 
回 2% 机 和 图 隐 
回 民生 几 H 时 怖 可 


图 7-9 “交换 图 像 ” 对 话 框 图 7-10 添加 行为 


步骤 07 人 保存 文档 , 按 F12 键 在 浏览 器 中 预览 ， 鼠标 指针 未 经 过 图 像 时 的 效果 如 图 7-3 所 示 ， 鼠 
标 指针 经 过 图 像 时 的 效果 如 图 7-4 所 示 。 


7.3.2 ”恢复 交换 图 像 


利用 “恢复 交换 图 像 ”行为 ， 可 以 将 所 有 被 蔡 换 显示 的 图 像 恢复 为 原始 图 像 。 一 般 来 说 ， 在 
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设置 “交换 图 像 ”行为 时 会 自动 添加 “恢复 交换 图 像 ”行为 ， 这 样 当 鼠标 离开 对 象 时 就 会 自动 恢 
复原 始 图 像 。 

如 果 在 设置 “交换 图 像 ”行为 时 ， 没 有 选中 “交换 图 像 ” 对 话 框 中 的 “鼠标 滑 开 时 恢复 图 像 ” 
复 选 框 ， 则 仅 为 对 象 附加 “交换 图 像 ”行为 ， 而 没有 附加 “恢复 交换 图 像 ” 行 为 。 这 时 ， 读 者 可 
以 手动 为 图 像 设 置 “ 恢 复 交换 图 像 ”行为 ， 具 体操 作 步 骤 如 下 。 
步骤 01 选中 页 面 中 附加 “交换 图 像 ” 行 为 

的 对 象 。 
步 际 024 单 击 “行为 ”面板 中 的 “添加 行为 ” 
按钮 ， 在 弹出 的 菜单 中 选择 “恢复 
交换 图 像 ”， 弹 出 “恢复 交换 图 像 ” -一 -一 一- 
对 话 框 ， 如 图 7-11 所 示 。 图 7-11 “恢复 交换 图 像 ” 对 话 框 
步骤 034 在 对 话 框 上 没有 可 以 设置 的 选项 ， 
直接 单 击 “确定 ”按钮 ， 即 可 为 对 象 添加 “恢复 交换 图 像 ” 行 为 。 


7.3.3 小 实例 一 一 打开 浏览 器 窗口 


使 用 “打开 浏览 器 窗口 ”动作 可 以 在 一 个 新 的 窗口 中 打开 URL。 可 以 指定 新 窗口 的 属性 〈 包 
括 其 大 小 )、 特 性 ( 它 是 否 可 以 调整 大 小 、 是 否 具有 菜单 栏 等 ) 和 名 称 。 例如， 可 以 使 用 此 行为 让 
浏览 者 单 击 缩 略图 时 在 一 个 单独 的 窗口 中 打开 一 个 较 大 的 图 像 。 使 用 此 行为 ， 还 可 以 使 新 窗口 与 
该 图 像 恰好 一 样 大 。 下 面 创建 打开 浏览 器 窗口 网 页 ， 效 果 如 图 7-12 所 示 ， 具 体操 作 步 又 如 下 。 


图 7-12 打开 浏览 器 窗口 网 页 的 效果 
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原始 文件 : 原始 文件 /07/7.3.3/index.htm 
最 终 文件 : 最 终 文件 /07/7.3.3/index1.htm 
步骤 01M 打开 网 页 文档 ， 如 图 7-13 所 示 。 
步骤 02 4 单 击 文档 窗口 中 的 <body> 标 签 ， 执 行 “窗口 ”|“ 行 为 ”命令 ， 打 开 “ 行 为 ”面板 ， 在 
“行为 ”面板 中 单 击 “ 添 加 行为 ”按钮 国 ， 在 弹出 的 菜单 中 选择 “打开 浏览 器 窗口 ” 选 
项 ， 如 图 7-14 所 示 。 


OE 

NH HH EE KAD WM Wd) Sd Wel) ECW He Dw -tole 
Se Wa SE Wh Pai Wo 0 0 I 

rem 


图 7-13 打开 网 页 文档 图 7-14 选择 “打开 浏览 器 窗口 ”选项 


步 野 034 选中 选项 后 ， 弹 出 “打开 浏览 器 窗口 ”对 话 框 ， 在 对 话 框 中 单 击 “ 要 显示 的 URL” 文 
本 框 右边 的 “浏览 ”按钮 ， 如 图 7-15 所 示 。 

步 又 044 弹出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 选择 images/jiqiao.jpg， 单 击 “确定 ”按钮 ， 如 
图 7-16 所 示 。 


要 星 示 的 URL | 
南口 度 南口 高 训 


属 伯 一 导航 工具 栏 


aN): ijqiaojpg - | 


图 7-15 “打开 浏览 器 窗口 ”对 话 框 图 7-16 “选择 文件 ”对 话 框 
友 知识 要 点 克 
“打开 浏览 器 窗口 ”对 话 框 中 可 以 进行 如 下 设置 。 


。 要 显示 的 URL: 填 入 浏览 器 窗口 中 要 打开 链接 的 路 径 。 
。 窗 口 宽度 : 设置 窗口 的 宽度 。 
。 窗口 高 度 : 设置 窗口 的 高 度 。 
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。 属 性 : 设置 打开 浏览 器 窗口 的 一 些 参数 。 选中 “导航 工具 栏 ”为 包含 导航 条 ; 选中 “菜单 条 ”为 包 
含 菜 单条 ; 选中 “地 址 工具 栏 ”后 在 打开 浏览 器 窗口 中 显示 地 址 栏 ; 选中 “需要 时 使 用 滚动 条 ”， 
如 果 窗 口中 内 容 超出 窗口 大 小 ， 则 显示 滚动 条 ; 选中 “状态 栏 ”后 可 以 在 弹出 窗口 中 显示 状态 栏 ; 
选中 “调整 大 小 手柄 "， 浏 览 者 可 以 调整 窗口 大 小 。 

。 窗 口 名 称 : 给 当前 窗口 命名 。 


步骤 054M 将 “ 宽 ” 设 置 为 650，“ 高 ”设置 为 405，“ 窗 口 名 称 ” 中 输入 名 称 jiqiao，“ 属 性 ” 
选择 “需要 时 使 用 滚动 条 ”， 如 图 7-17 所 示 。 
步 双 06M 单 击 “ 确 定 ”按钮 ， 将 行为 添加 到 “行为 ”面板 中 ， 如 图 7-18 所 示 。 


Dw 栈 - D0- 
5 有 5 日 EM A Wer WlO) = Wats BOW mt) 


显示 的 URL :imagesy jiqiao. jpg 
窗口 珊 度 ;650 商品 高 朗 、405 
属性 : 局 叶 航 工具 攻 回 菜单 条 


] 地 址 工具 栏 回 需要 时 使 用 深 动 条 
] 状态 栏 日 调整 大 小 手 本 
军 口 名称 jiqiao 


图 7-17 设置 “打开 浏览 器 窗口 ”对 话 框 图 7-18 添加 行为 
步骤 07 和 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-12 所 示 。 


7.3.4 “小 实例 


下 面 创建 一 个 调用 JavaScript 自动 关闭 网 页 的 效果 ， 如 图 7-19 所 示 ， 有 具体 操作 步骤 如 下 。 


原始 文件 ， 原始 文件 /07/7.3.4/index.htm 
最 终 文件 ， 最 终 文件 /07/7.3.4/indexl1 .htm 


步 又 014 打开 网 页 文档 ， 如 图 7-20 所 示 。 


调用 JavaScript 


图 7-19 利用 JavaScript 自动 关闭 的 网 页 效果 
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图 7-20 打开 网 页 文档 
步骤 024 选择 文档 窗口 中 左下 角 的 <body> 标 签 ， 执 行 “ 窗 口 ”|“ 行 为 ”命令 ， 打 开 “ 行 为 ” 面 
板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 国 ， 在 弹出 的 菜单 中 选择 “调用 JavaScript” 选 项 ， 
如 图 7-21 所 示 。 


7-21 选择 “调用 JavaScript” 选 项 
步骤 034 选择 选项 后 ， 弹 出 “调用 JavaScript” 对 话 框 ， 在 对 话 框 中 的 JavaScript 文本 框 中 输入 
window.close()， 如 图 7-22 所 示 。 
步骤 044 单 击 “确定 ”按钮 ， 添 加 到 “行为 ”面板 中 ， 将 事件 设置 为 onload， 如 图 7-23 所 示 。 
保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-19 所 示 。 


图 7-22 “调用 JavaScript” 对 话 框 7-23 ”添加 行为 


150 


第 7 章 使 用 行为 设计 动态 特效 网 页 (9 


7.3.5 “小 实例 一 一 转 到 URL 


“ 转 到 URL” 动 作 是 设置 链接 时 使 用 的 动作 。 通 常 的 链接 是 在 单 击 后 跳 转 到 相应 的 网 页 文档 
中 ， 但 是 “ 转 到 URL” 动 作 在 把 鼠标 放 上 后 或 者 双击 时 ， 都 可 以 设置 不 同 的 事件 来 加 以 链接 。 跳 
转 前 的 效果 和 跳 转 后 的 效果 分 别 如 图 7-24 所 示 和 图 7-25 所 示 ， 具 体操 作 步 又 如 下 。 


图 7-24” 跳 转 前 的 效果 图 7-25” 跳 转 后 的 效果 


原始 文件 ， 原始 文件 /07/7.3.5/index.htm 
最 终 文件 ， 最终 文 件 /07/7.3.5/index1 .htm 


步骤 01@ 打开 网 页 文档 ， 如 图 7-26 所 示 。 


图 7-26 打开 网 页 文档 
步骤 024 执行 “窗口 ” |“ 行为” 命令， 打开 “行为 ”面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 国 ， 
在 弹出 的 菜单 中 选择 “ 转 到 URL” 选 项 ， 如 图 7-27 所 示 。 


151 


( s IT 


7-27 选择 “ 转 到 URL” 选 项 


步 双 034 选择 选项 后 ， 弹 出 “ 转 到 URL” 对 话 框 ， 在 对 话 框 中 单 击 URL 文本 框 右边 的 “浏览 ” 
按钮 ， 如 图 7-28 所 示 。 
步骤 044 弹出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 选择 文件 indexl.htm， 如 图 7-29 所 示 。 


TI 
为了 有 于 取 上 汉沽 R | 
地 有 机, 已 上 了 9 向 | 


7-28 “ 转 到 URL” 对 话 框 图 7-29 “选择 文件 ”对 话 框 


太 知识 要 点 友 

“ 转 到 URL” 对 话 框 中 可 以 进行 如 下 设置 。 

@@ 打开 在 : 选择 打开 链接 的 窗口 。 如 果 是 框架 网 页 ， 则 选择 打开 链接 的 框架 。 

®@ URL: 输入 链接 的 地 址 ， 也 可 以 单 击 “ 浏 览 ”按钮 在 本 地 硬盘 中 查找 链接 的 文件 。 

步 最 054 单 击 “ 确 定 ”按钮 ， 添 加 到 URL 文本 框 中 ， 如 图 7-30 所 示 。 

步 最 064 单 击 “ 确 定 ”按钮 ， 将 行为 添加 到 “行为 ”面板 中 ， 如 图 7-31 所 示 。 

步骤 074 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 。 跳 转 前 的 效果 和 跳 转 后 的 效果 分 别 如 图 7-24 和 
7-25 所 示 。 
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图 7-30 添加 文件 图 7-31 添加 行为 


7.3.6 小 实例 一 一 弹出 信息 


弹出 信息 显示 一 个 带 有 指定 信息 的 警告 窗口 ， 因 为 该 警告 窗口 只 有 一 个 “确定 ”按钮 ， 所 以 
使 用 此 动作 可 以 提供 信息 ， 而 不 能 为 用 户 提供 选择 。 创 建 弹出 信息 网 页 的 效果 如 图 7-32 所 示 , 具 
体操 作 步 又 如 下 。 


牡丹 大 酒店 


图 7-32 弹出 信息 效果 


原始 文件 ， 原始 文件 /077/7.3.6/index.htm 
最 终 文件 ， 最 终 文件 /07/7.3.6/indexl1 .htm 


步 又 014 打开 网 页 文档 ， 如 图 7-33 所 示 。 
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图 7-33 ”打开 网 页 文档 


步 又 024 单 击 文档 窗口 中 的 <body> 标 签 ， 执 行 “ 窗 口 ”|“ 行 为 ”命令 ， 打 开 “ 行 为 ”面板 ， 单 
击 “ 行 为 ”面板 中 的 “添加 行为 ”按钮 局 ， 在 弹出 菜单 中 选择 “弹出 信息 ”选项 ， 如 
图 7-34 所 示 。 


-| 
一 mr 


+ 
a rp 


图 7-34 选择 “弹出 信息 ”选项 
步 野 034 弹出 “弹出 信息 ”对 话 框 , 在 对 话 框 中 输入 文本 “您 好 ， 光 临 我 们 的 网 站 !”， 如 图 7-35 
所 示 。 
步骤 044 单 击 “ 确 定 ”按钮 ， 添 加 行为 ， 如 图 7-36 所 示 。 


|Dw Be- Ch OLIolx 
[Res wm so aa noo sa ore aas wa ea 
ee ; 


二 
Te 


牡丹 大 酒店 


7-35 “弹出 信息 ”对 话 杠 7-36 ”添加 行为 
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步骤 05 人 保存 文档 ， 按 F12 键 即 可 在 浏览 器 中 看 到 弹出 提示 信息 ， 网 页 效果 如 图 7-32 所 示 。 
太 提示 女 
信息 一 定 要 简短 ， 如 果 超 出 状态 栏 的 大 小 ， 浏 览 器 将 自动 截断 该 信息 。 


7.3.7 “小 实例 一 一 预先 载 入 图 像 


“预先 载 入 图 像 ” 动 作 将 不 会 使 网 页 内 选中 的 图 像 〈 如 那些 将 通过 行为 或 JavaScript 调 入 的 图 
像 ) 立即 出 现 ， 而 是 先 将 它们 载 入 到 浏览 器 缓存 中 。 这 样 做 可 以 防止 当 图 像 应 该 出 现时 由 于 下 载 
而 导致 延迟 。 预 先 载 入 图 片 的 效果 如 图 7-37 所 示 ， 具 体操 作 步 骤 如 下 。 


发 有 内 


图 7-37 预先 载 入 图 片 的 效果 


原始 文件 ， 原 始 文件 /07/7.3.7/index.htm 
最 终 文件 ， 最 终 文件 /07/7.3.7/index1 .htm 


步骤 014 打开 网 页 文档 ， 选 中 图 像 ， 如 图 7-38 所 示 。 


LS nt 3 可。 .3 


图 7-38 打开 网 页 文档 


步骤 024 执行 “窗口 ”| “行为” 命令， 打开 “行为 ”面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 司 3)， 
在 弹出 的 菜单 中 选择 “预先 载 入 图 像 ”动作 选项 ， 如 图 7-39 所 示 。 
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图 7-39 选择 “预先 载 入 图 像 ” 选 项 
步骤 034 弹出 “预先 载 入 图 像 ”对 话 框 ， 在 对 话 框 中 单 击 “ 图 像 源 文件 ”文本 框 右边 的 “浏览 ” 


按钮 ， 如 图 7-40 所 示 。 
步骤 044 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 预先 载 入 的 图 像 
images/2012121715432894.jpg， 如 图 7-41 所 示 。 


JR ”37H 夫 ER -Di 
:> 
ee re 
CE ci | m | 
| HH ' Ss ; be .| 
名 wy GO 202121715492 2012121715405 
这 一 2 ”全 
全 先 款 入 罗 介 | zz | [Es .| ~ RACKUP IE = = 
国 隐 了 件 es) ra wmissesips]  - [BOR tgtipgipegp 
Eeea] me | mw ) 
图 7-40 “预先 载 入 图 像 ” 对 话 框 图 7-41 “选择 图 像 源 文件 ”对 话 框 
步骤 05 4 单 击 “ 确 定 ”按钮 ， 添 加 到 “图 像 源 文件 ”文本 框 中 ， 如 图 7-42 所 示 。 


步骤 06M 单 击 “ 确 定 ”按钮 ， 添 加 行为 到 “行为 ”面板 中 ， 如 图 7-43 所 示 。 


7-43 ”添加 行为 
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步 又 07 4 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-37 所 示 。 
7.3.8 小 实例 一 一 设置 状态 栏 文本 


“设置 状态 栏 文本 ”用 于 设置 状态 栏 中 显示 的 信息 ， 在 触发 事件 被 触发 后 ， 状 态 栏 中 将 显示 
相关 的 信息 。 下 面 通 过 实例 讲述 状态 栏 文本 的 设置 ， 效 果 如 图 7-44 所 示 ， 具 体操 作 步 又 如 下 。 


六 高 手 支 招 女 


“设置 状态 栏 文本 ”动作 的 作用 与 弹出 信息 动作 的 作用 很 相似 ,所 不 同 的 是 ， 如 果 使 用 消息 框 来 显示 
文本 ,访问 者 必须 单 击 “ 确 定 ”按钮 才 可 以 继续 浏览 网 页 中 的 内 容 。 而 在 状态 栏 中 显示 的 文本 信息 不 


会 影响 访问 者 的 浏览 速度 。 浏览 者 会 常常 忽略 状态 栏 中 的 消息 ， 如 果 消 息 非常 重要 , 则 考虑 将 其 显示 
为 弹出 式 消息 或 层 文本 。 


图 744 设置 状态 栏 文本 效果 
原始 文件 ， 原 始 文件 /07/7.3.8/index.htm 
最 终 文件 : 最终 文 件 /07/7.3.8/index1.htm 


步骤 014 打开 网 页 文档 ， 如 图 7-45 所 示 。 


Dw 
kf] 和 EV FAD HAM RO) 全 SC ety 


me. otol x 
Do 


der html EE 


供 捷 


7-45 ”打开 网 页 文档 
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步骤 02 单 击 文档 窗口 中 左下 角 的 <body> 标 签 ， 打 开 “ 行 为 ”面板 ， 单 击 “ 添 加 行为 ”按钮 司 ， 
在 弹出 的 菜单 中 选择 “设置 文本 ”|“ 设 置 状态 栏 文本 ”选项 ， 如 图 7-46 所 示 。 


Dw 


Ba- Eh Ol-lol x | 
Te 5 日 EM SAD WM FEO) SSIO Ay BW Retr 


人 | 拆 # 本 | | 关 斤 图 。 代 。 帮 要 


图 7-46 选择 “设置 状态 栏 文本 ”选项 

步 台 034 弹出 “设置 状态 栏 文本 ”对 话 框 ， 在 “消息 ”文本 框 中 输入 文本 “ 庆 五 一 ， 凡 在 我 店 
购买 蛋糕 ， 一 律 打 八 折 哦 ! ”， 如 图 7-47 所 示 。 

步骤 044 单 击 “ 确 定 ” 按 钮 ， 将 行为 添加 到 “行为 ”面板 中 ， 如 图 7-48 所 示 。 


消息 | 庆 五 一 ， 凡 在 我 店 殉 天 至 粮 ， 一 宕 打 儿 白蜡 1 


注意 -并 非 所 有 浏 监 崖 都 支持 更 尼 杖 态 栏 文本 ， 蘑 些 齐 抱 
若 会 根 捐 用户 首选 项 数 末 确 走 是否 允许 此 功 酸 。 


图 7-47 “设置 状态 栏 文本 ”对 话 框 
广 提示 妆 


图 7-48 添加 行为 

在 “设置 状态 栏 文本 ”对 话 框 的 “消息 ”文本 框 中 输入 消息 。 该 消息 简明 扼要 ， 如 果 消 息 不 能 完全 放 
在 状态 栏 中 ， 浏 览 器 将 截断 消息 。 

步 又 054 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-44 所 示 。 
7.3.9 小 实例 一 一 检查 表单 


“检查 表单 ”动作 是 检查 指定 文本 域 的 内 容 以 确保 用 户 输入 了 正确 的 数据 类 型 。 使 用 onBlur 
事件 将 此 动作 分 别 附加 到 各 文本 域 中 ， 在 用 户 填写 表单 时 对 文本 域 进 行 检查 ; 或 使 用 onSubmit 
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事件 将 其 附加 到 表单 中 ， 在 用 户 单 击 “ 提 交 ” 按 钮 的 同时 对 多 个 文本 域 进行 检查 。 将 此 动作 附加 
到 表单 ， 防 止 表单 提交 到 服务 器 后 文本 域 包含 无 效 的 数据 。“ 检 查 表单 ”动作 的 效果 如 图 7-49 所 
示 ， 具 体操 作 步 又 如 下 。 


华润 食品 有 限 公 司 


图 749 检查 表单 效果 


原始 文件 :原始 文件 /07/7.3.9/index.htm 
最 终 文件 ， 最终 文 件 /07/7.3.9/index1.htm 


步 又 014 打开 网 页 文档 ， 选 中 表单 域 ， 如 图 7-50 所 示 。 


Be-. Ch ol-lol x] 


H(A WE EV A SIM) eC) S310) Mets ECW) Ri 
rocn * | 
TE star es 7 了 全 开 
MN。 世 村 3 Fe 


EE 


图 7-50 打开 网 页 文档 
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步骤 024 执行 “窗口 ”|“ 行 为 ”命令 ， 打 开 “ 行 为 ”面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 国 ， 
在 弹出 菜单 中 选择 “检查 表单 ”选项 ， 如 图 7-51 所 示 。 


7-51 选择 “检查 表单 ”选项 
步骤 034 弹出 “检查 表单 ”对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 7-52 所 示 。 
步骤 044 单 击 “ 确 定 ”按钮 ， 添 加 到 “行为 ”面板 中 ， 如 图 7-53 所 示 。 


Dw 局。 本 0- x] 
ZH wD EE SA aM WO) (qi BIW meth 


可 报 党 ”后 任何 本 本 日 


加 电 寺 地 件 地 址 数字 从 到 


图 7-52 “检查 表单 ”对 话 框 7-53 ”添加 到 “行为 ”面板 
友 知识 要 点 友 
“检查 表单 ”对 话 框 中 的 “可 接受 ”选项 组 可 以 进行 如 下 设置 。 


。 任何 东西 : 如 果 该 文本 域 是 必需 的 但 不 需要 包含 任何 特定 类 型 的 数据 ， 则 使 用 “任何 东西 ”。 
。 电子 邮件 地 址 : 使 用 “电子 邮件 地 址 ”检查 该 域 是 否 包含 一 个 @ 符 号 。 

。 数字 : 使 用 “数字 ”检查 该 文本 域 是 否 只 包含 数字 。 

。 数字 从 : 使 用 “数字 从 ”检查 该 文本 域 是 否 包含 特定 范围 内 的 数字 .。 


步骤 054 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 。 当 在 文本 域 中 输入 不 规则 电子 邮件 地 址 和 
姓名 时 ， 表 单 将 无 法 正常 提交 到 后 台 服 务 器 ， 这 时 会 出 现 提示 信息 框 ， 并 要 求 重新 输 
入 ， 如 图 7-49 所 示 。 
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7.3.10 ”小 实例 一 一 Blind 效果 


Blind 效果 可 以 隐藏 和 显示 对 象 ， 下 面 通 过 实例 讲述 Blind 效果 ， 如 图 7-54 所 示 。 


玉环 公司 加 有 户 肖 让 太 区 ， 自 于 有 1 二 件 可 旦 闻 ， 到 :199 引 贡 给 欠 全 年 下 农 广 生 双 后 
的 站 藉 ， 节 小 了 名 种 中 加 汗 ， 贞 折价 区 最 本 和 ， 重 所 重 、 守 信用 ， 捉 有 杜 几 500 人 个 吕 
各， 三 55100 人 品种 > 

有 共 杜 、 及 本 守 、 下 各 、 示 机， iID| 玫 、 业 向 祭 各 六 r、 焉 和 二 三民 、 冯 相 、 莉 山 
村 、 柱 悦 、 自 怒 、 和信 , 左 和 等 从 ?50 公 分 ， 各 各 标本 和 不 。 
组 扣 艇 力 ， 让 从 项 光 未、 开心 机 去 。 交 天 NTI， 让 六 共 望 训 散 罗 关 帮 人 


mi 位， 本 公司 雪人 区 人 有 罕 括 号” 
人 


图 7-54 Blind 效果 


原始 文件 :原始 文件 /07/7.3.10/index.htm 
最 终 文 件 ， 最 终 文件 /07/7.3.10/index1l.htm 


步 邓 01 打开 网 页 文档 ， 选 择 要 应 用 效果 的 内 容 或 布局 对 象 ， 如 图 7-55 所 示 。 


Dw Bs. CH D-Ill x*] 
文人 (日 王 泗 \V) 得 和 ID 过 8z(M| 入 Xi0) S(O si BOW) sm) 

dechem x a EE 
i [3 


将 量 ， 了 了 特种 中 可， 最 攻 的 从 全 ， 好 和 好 的 开学， 要 所 寺 、 守 信用 ， 基 有 仁 用 00 作 个 电 人 
0 人 

和 和 于 囊 海 、 贴 本 本、 开 面 、 和、 红 
计 字 、 介 部 竺 厅 虹 不 、 生 开本 村、 法 
机 、 黄山 素 、 术 本、 白 暑 、 香 央 ， 龙 扩 术 等 从 
04 计 ， 得 机 村 直 

快 加 凶 与 组 绍 能力， 让 作 欠 生 二， 
下 已 而 二 。 半天 后 8 做， 再 关节 与 并 
汉人 F 估 性 二 公 司 志 人 效 邵 人 二 罕 ES。 


上 i 二 
I AD lO he DO RE 国 而 号 oartv 
ee 


图 7-55 打开 网 页 文档 
步骤 024 在 “行为 ”面板 中 单 击 “添加 行为 ”按钮 饮 ， 在 弹出 的 菜单 中 选择 “效果 ”| Blind 选 
项 ， 如 图 7-56 所 示 。 
步骤 034 弹出 Blind 对 话 框 ， 在 “目标 元 素 ”下 拉 列 表 中 选择 “< 当前 选 定 内 容 >” 选 项 ，“ 效 
果 持 续 时 间 ” 设 置 为 1000ms，“ 可 见 性 ”中 设置 hide，“ 方 向 ”选择 up， 如 图 7-57 
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Dw Fe oe 
Fe wi) HEM BAD Wu Mono) esl er MW soy 

一 = 

6 | 拓 坟 [应 | 工时 可。 村 征 


| 
ne 

Sa 
| 
pum i i RA 
| 
于。 列 去 * 志 无 印 而 忧 ， 肌 庆 订 冯 与 态 肝 为 
ro tenn. 


A A hee) or HD I ht 0 
E33 


图 7-56 选择 Blind 选项 图 7-57 Blind 对 话 框 
友 知识 要 点 女 
Blind 对 话 框 中 可 以 进行 如 下 设置 。 
。 目标 元 素 : 选择 某 个 对 象 的 ID。 如 果 已 经 选择 了 一 个 对 象 ， 则 选择 “< 当前 选 定 内 容 >” 选 项 。 
。 效果 持续 时 间 : 定义 出 现 此 效果 所 需 的 时 间 ， 用 毫秒 表示 。 


e 可 见 性 : 有 三 种 选项 ， 即 hide、show、toggle。 
。 方向 : 在 此 设置 图 像 的 变化 方向 ， 即 up、down、left、right、vertical、horizontal。 


步 野 044 单 击 “ 确 定 ” 按 钮 ， 将 行为 添加 到 “行为 ”面板 中 ， 如 图 7-58 所 示 。 
步骤 054 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-54 所 示 。 


Dw Bs. GH Ol.-lol *] 
(和 富 类 和 TD 侈 %(M) IO 他 4(Q 垃 5(5) 二 Crm RH 


| 
set 

| 拓 及 科 本 ,内 全 可 、 旭 音 、 革 条， 开 
HI 

简 , 华山 京 , 要 笠 , 日 多 ， 匡 术 、 轴 其 宕 从 


于 (而 去 * 夫 天 后 而 优越 基 明 与 信 蕊 力 
站 作 代 任 ， 二 公司 名 全 下 全 下 才 字 括 守 


7 GY CD ey OY 0) AD Ce eT Cer) 


图 7-58 添加 行为 
7.3.11 小 实例 一 一 跳 转 菜单 


跳 转 菜单 是 超 链接 的 一 种 形式 ， 使 用 跳 转 菜单 要 比 其 他 形式 链接 节省 更 多 页 面 的 空间 。 跳 转 
菜单 从 菜单 发 展 而 来 ， 单 击 并 选择 下 拉 菜 单 时 会 跳 转 到 目标 网 页 。 当 从 跳 转 菜单 中 选择 一 个 名 称 
时 ， 就 会 链接 到 相应 的 网 站 ， 效 果 如 图 7-59 所 示 ， 有 具体 操作 步骤 如 下 。 
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天 品 四 内 形 景 工作 服务 四则 


| 


,不 籽 按 二 流 计 二 、 品 所 起 玫 ， 扩 说 肛交 汉 丘 避 。 


注重 本 对 委 评 ， 跌 至 元 关 的 传 搞 ， 全 托 公司 专业 化 、 规 若 化 、 拓 得 做, 国际 化 的 生产 元 力 各 
产品 和 后 6a/T4100_ 2006 和 时 G (UGL) 村 丰 ， 所 有 六 呈 均 于 村 训 


产品 ， 芝 关 读 同 本 请 有 人 国美、 东 丙 下、 中 放 、 奈 二、 大 注 和 和 化 


号 这 大政、 完美 要 有 ,不 和 和 过 对 交友 、 和 DR， 人才, 季 本 信和 是 淆 表 9] 时 人 过 ， 
和 的 各 六 bf 人 导 扣 同 直 关 字 天 这 元 1 


于 页 |。 部 全 | 产品 要 孝 【| 再 和 工 间 | 本 关中 村 人 En3h 


7-59 预览 效果 


原始 文件 ， 原始 文 件 /07/7.3.11/index.htm 
最 终 文件 :最终 文件 /07/7.3.11/index1.htm 


步骤 01 和 0 打开 网 页 文档 ， 选 中 要 插入 的 跳 转 菜单 ， 如 图 7-60 所 示 。 
=. CH o-oo x] 


Dw 

ID mF) EV EA HestM) 0) SC wts) BO Wl 

indechem x 1 要 

OTSY eco ore cheaper one 区 了 | 面 s 王 
后 | [ 圳 基因 已。 ff [3 三 如 


“| 


a | 
 。 展 ” 的 经 营 原 网 ,不断 扒 出 这 计 亲征、 品质 二 将 、 岂 麻 世 守 们 让 让 
生生 5 过， 人 全 专业 化 、 和 化 
中 心 ， 产 旺 各 涡 性 能 楼 标 社 襄 c3/T4100 一 2005 东 5 (we) 标定， 
Nl SB 
了 RE 村 :、 岂 说 办 二 、 训 人 f, 
失信 ， 广 有 于 天 村人 宅 、 起 


图 7-60 打开 网 页 文档 
步骤 024 执行 “窗口 ”| “行为” 命令， 打开 “行为 ”面板 ， 在 “行为 ”面板 中 单 击 添加 行为 按 
钮 周 9， 在 弹出 的 下 拉 菜 单 中 选择 “ 跳 转 菜单 ”选项 ， 如 图 7-61 所 示 。 
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( s IT 


Be- 团 OLTIeLx 


图 7-61 选择 “ 跳 转 菜单 ”选项 
步 最 034 弹出 “ 跳 转 菜单 ”对 话 框 ， 在 对 话 框 中 添加 相应 的 内 容 ， 单 击 “ 菜 单项 ”中 的 [二 按钮 ， 
在 “文本 ”文本 框 中 输入 该 项 的 内 容 ， 在 “选择 时 ， 转 到 URL” 文本 框 中 输入 所 指向 
的 链接 目标 ， 如 图 7-62 所 示 。 
步 野 044 单 击 “确定 ”按钮 ， 添 加 行为 ， 如 图 7-63 所 示 。 


tT 
ET ED 


J URL TF EES 
Nun aR 


RE 


图 7-62 “ 跳 转 菜单 ”对 话 框 图 7-63 添加 到 “行为 ”面板 

友 知识 要 点 女 

在 “ 跳 转 菜单 ”对 话 框 中 可 以 进行 如 下 设置 。 

。 单 击 [ 守 ] 按钮 添加 一 个 菜单 项 ， 再 次 单 击 该 按钮 添加 另 一 个 菜单 项 。 选 定 一 个 菜单 项 ， 然 后 单 击 [一 
按钮 将 其 删除 。 

。 选 定 一 个 菜单 项 ， 然 后 用 箭头 键 在 列表 中 向 上 或 向 下 移动 此 菜单 项 来 调整 位 置 。 

。 在 “文本 ”文本 框 中 ， 为 菜单 项 键入 要 在 菜单 列表 中 出 现 的 文本 .。 

。 在 “选择 时 ， 转 到 URL” 文 本 框 中 ， 单 击 “ 浏 览 ” 按 钮 找到 要 打开 的 文件 ， 或 者 在 文本 框 中 输入 
该 文件 的 路 径 。 

。 在 “打开 URL 于 ”下 拉 列 表 中 选择 文件 的 打开 位 置 : 选择 “ 主 窗 口 "， 将 在 同一 窗口 中 打开 文件 。 
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细 05 1 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7.59 所 示 。 当 从 跳 转 菜 单 中 选择 一 个 
名 称 时 ， 就 会 链接 到 相应 的 网 站 。 
7.4 使 用 JavaScript 制作 网 页 特效 
在 网 页 制作 中 ，Javaseript 是 脚本 语言 ， 它 可 以 嵌入 到 HTML 中 ， 并 在 客户 端 执行 ， 是 动态 
特效 网 页 设计 的 最 佳 选择 ， 同 时 也 是 浏览 器 普遍 支 持 的 网 页 脚本 语 计 
7.4.1 小 实例 一 一 制作 滚动 文字 公告 


滚动 公告 栏 也 称 滚 动 字幕 。 滚 动 公告 栏 的 应 用 将 使 得 整个 网 页 更 有 动感 ， 如 图 7-64 所 示 
作 滚动 公告 栏 的 具体 操作 步骤 如 下 。 


。 制 


Newmeins 


1 
Pata PB: ! 
SO Ea 


畏 包 本 务 顶 目 | 


图 7-64 ”滚动 公告 栏 效果 
原始 文件 :原始 文件 /07/7.4.1/index.html 
最 终 文件 : 最终 文件 /07/7.4.1/index1.html 


步骤 01M 打开 网 页 文档 ， 首 先 选中 文字 ， 如 图 7-65 所 示 。 
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Dw Le] 
文体 旧 。 恩 后 (B。 全 专 W 英和 四 ka bd 全 SO 和 Eg ee 


酒店 必 富 


| 
Fe bey A GD (to YU Cy QD Hey Chedr) G7 4D 邮 | sx sf: 


图 7-65 打开 网 页 文档 
步骤 024 在 “代码 ”视图 状态 下 ， 在 文字 的 前 面 加 上 一 段 代码 ， 如 图 7-66 所 示 。 


“<marquee onmouseover=this.stop() 
style=height: 160px onmouseout=this.start() scrollAmount=1 
scrollDelay=1 direction=up width=213 height=230>” 


Dw | 加 器 本 本 
文 做 兰 避 日 去 要 VW 后 AU RR ek 5 Loa) a 


238 hetght=3 


<TD szyle="LINE-HEIGHT: 24px; font-sfze: 12px;" 
height-118 vALigrmtop 可 
align-niddle 


各 : 
发 ， 网 站 也 进行 了 改版 ， 不 论 从 航 色 市 局 ， 内 容 等 都 更 加 的 法 在 客户 的 角 ) 
竹 虎 ， 和 a 


图 7-66 输入 代码 


步 聚 034 在 文字 的 后 边 加 上 代码 “</marquee>”， 如 图 7-67 所 示 。 
步 野 044 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-64 所 示 。 


166 


第 7 章 使 用 行为 设计 动态 特效 网 页 个 ) 


要 - D0-lel*] 


aecnmmr x 9 
| 了 | 男生 
| 部 殷 ”本 EF3 霹 me 

由 | 
加 T 好 画 
| 


加 


图 7-67 输入 代码 


7.4.2 “小 实例 一 一 禁止 下 载 网 页 图 像 


在 一 些 网 页 上 ， 当 用 户 单 击 鼠 标 右键 时 会 弹出 警告 窗口 或 者 直接 就 没有 任何 反应 。 其 作用 是 
让 用 户 无 法 使 用 鼠标 右键 中 的 相应 功能 ， 从 而 限制 用 户 一 定 的 操作 权限 。 禁 止 鼠标 右 击 效果 如 图 
7-68 所 示 ， 有 具体 操作 步骤 如 下 。 


A 
机 3 
去 有 区 
Ea 1 


译本 询 。 和 


EN 


TN 其 二 HE 一 和 


图 7-68 禁止 鼠标 右 击 效果 


原始 文件 原始 文件 /07/7.4.2/index.html 
最 终 文件 : 最终 文 件 /07/7.4.2/index1.html 
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步骤 01 打开 网 页 文档 ， 如 图 7-69 所 示 。 


Dw Bm. th olel* 
me) al) EEV A GM mt) sold Wals) BIW Bul 

Co 3 E s 户 - 
EY se 了 | 本 ss 


而 | 其 人 天 招 轴 。 包 。 村 要 


Qe Cle Abr) tr A die bel) tery ny 月 夯 大 5%5 x 3 
L 3 


图 7-69 打开 网 页 文档 
步 又 024 打开 代码 视图 ， 在 <head> 与 </ head> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 7-70 所 示 。 


<script language=javascript> 
function click() { 

if (event.button==2) { 
alert (' 禁 止 右键 复制 ! ') }} 

function CtrlKeyDown(){ 

if (event.ctrlKey) { 

alert ('" 不 当 的 拷贝 将 损害 您 的 系统 ! ') }} 
document .onkeydown=CtrlKeyDown; 
document .onmousedown=click; 


</script> 
Dw -| 国 OLlelz 
文件 (站 ” 稀 澡 (日 、 二 看 (V) 。 报 入 ID) 修改 (Mi 格式 (0) 号 S[ 〇 人 站 点 (5) 证 口 (W) 。 帮 执 (H) 
iu x | 
[i 了 | 二 旺 


ESHTIC $. 00. 6001. 19253- 


图 7-70 输入 代码 
步骤 034 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-68 所 示 。 
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7.4.3 “小 实例 一 一 设置 为 IE 首页 


设置 为 首页 是 网 页 中 最 常见 的 功能 ,设置 为 IE 首页 的 效果 如 图 7-71 所 示 , 具体 操作 步骤 
如 下 。 


和 


什么 是 玩具 出 各? 


图 7-71 设置 为 下 首页 的 效果 
原始 文件 ， 原 始 文 件 /07/7.4.3/index.html 
最 终 文件 : 最 终 文件 /07/7.4.3/indexl1.html 
步骤 014 打开 网 页 文档 ， 如 图 7-72 所 示 。 
Dw Bw. CH Olol x] 


0 
Idexhim x 


加 加 中 庄 


图 7-72 打开 网 页 文档 
步骤 024 切换 到 “代码 ”视图 , 在 <body> 和 </body> 之 间 相 应 位 置 输入 以 下 代码 ,如 图 7-73 所 示 。 


<a onClick="this.style.behavior='url (#default#homepage)'; 
this .sethomepage ('http://www.dong.net');"href="#"> 设 为 首页 </a> 
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Dw B=. EH ol-lol x] 


RH mi SE A RM wo) ss ie 加 ECW se 
区 


图 7-73 输入 代码 
步 双 034 保存 文档 ， 按 F12 键 进入 浏览 器 中 预览 ， 效 果 如 图 7-71 所 示 。 


7.4.4 小 实例 一 一 添加 到 收藏 夹 


将 当前 打开 的 页 面 添加 到 收藏 夹 ， 将 其 网 址 保存 起 来 ， 方 便 今后 访问 ， 这 极 大 地 方便 了 很 多 
网 友 。 如 果 我 们 上 网 发 现 哪个 网 站 比较 好 ， 想 收藏 起 来 ， 但 是 网 址 又 难 记 ， 这 时 将 其 添加 到 收藏 
夹 是 最 有 效 的 方法 了 。 添 加 到 收藏 夹 的 效果 如 图 7-74 所 示 ， 有 具体 操作 步骤 如 下 。 


本 
i ARsonee- tae, 天 hdreoc- 


| smm 
to [三 


图 7-74 添加 到 收藏 夹 的 效果 


原始 文件 ， 原始 文件 /07/7.4.4/index.html 
最 终 文件 : 最 终 文件 /07/7.4.4/index1.html 


步骤 01 和 0 打开 网 页 文档 ， 如 图 7-75 所 示 。 
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步骤 024 将 光标 放置 在 文档 中 相应 的 位 置 ， 切换 到 拆 分 视图 中 ,输入 以 下 代码 ， 如 图 7-76 所 示 。 


<span style="CURSOR:hand" 
onClick="window.external.addFavorite('http:// 网 站 地 址 ', ' 添 加 收藏 ')" title=" 


添加 收藏 "> 添加 收藏 </ span> 
Dw EDOEIeLzT 


次 Ma) EE EN etM) 和 ol IC) m5 OO we Dw Bw- Eh ollels] 
ey ZE D7 


TRYINTERY) 


HWE 


图 7-75 打开 网 页 文档 图 7-76 输入 代码 
步 又 034 返回 “设计 ”视图 ， 保 存 文档 ， 按 下 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-74 所 示 。 
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本 章 导 读 


精美 的 网 页 离 不 开 CSS 技术 ， 采 用 CSS 技术 ， 可 以 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 

其 他 效果 实现 更 加 精确 地 控制 。 使 用 CSS 样式 可 以 制作 出 更 加 复杂 和 精美 的 网 页 ， 网 页 维护 和 
更 新 也 更 容易 、 更 方便 。 本 章 主要 介绍 CSS 简介 、CSS 样式 的 基本 概念 和 语法 、 设 置 CSS 样 
式 和 链接 到 或 导出 外 部 CSS 样式 表 。 

@ 了 解 CSS 样式 表 

@ CSS 基本 语法 

@ 掌握 设置 CSS 属性 

@ 掌握 链接 到 或 导出 外 部 CSS 样式 表 


和 一 | 
es es oe an seen v2ae es pos 生 
| TM i Mame nt 


链接 外 部 样式 表 应 用 CSS 样式 定义 字体 大 小 


第 8 章 使 用 CSS 样式 表 美 化 网 页 


应 用 CSS 样式 制作 阴影 文字 


8.1 了 解 CSS 样式 表 


层 登 样式 表 〈CSS) 是 一 组 格式 设置 规则 ， 用 于 控制 网 页 内 容 的 外 观 。 通 过 使 用 CSS 样式 
设置 页 面 的 格式 ， 可 将 页 面 的 内 容 与 表示 形式 分 开 。 页 面 内 容 〈 即 HTML 代码 ) 存放 在 HTML 
文件 中 ， 而 用 于 定义 代码 表示 形式 的 CSS 规则 存放 在 另 一 个 文件 (外 部 样式 表 ) 或 HTML 文档 
的 另 一 部 分 (通常 为 文件 头 部 分 ) 中 。 将 内 容 与 表示 形式 分 离 ， 可 使 得 从 一 个 位 置 集中 维护 站 点 
的 外 观 变 得 更 加 容易 ， 因 为 进行 更 改 时 无 需 对 每 个 页 面 上 的 每 个 属性 都 进行 更 新 。 将 内 容 与 表示 
形式 分 离 ， 还 会 可 以 得 到 更 加 简练 的 HTML 代码 ， 这 样 将 缩短 浏览 器 加 载 时 间 。 

使 用 CSS 可 以 非常 灵活 并 更 好 地 控制 页 面 的 确切 外 观 。 使 用 CSS 可 以 控制 许多 文本 属性 ， 
包括 特定 字体 样式 和 字体 大 小 ; 粗 体 、 斜 体 、 下 划 线 和 文本 阴影 ;文本 颜色 和 背景 颜色 ， 链 接 颜 
色 和 链接 下 划 线 等 。 通过 使 用 CSS 控制 字体 ， 还 可 以 确保 在 多 个 浏览 器 中 以 更 统一 的 方式 处 理 页 
面 布 局 和 外 观 。 

除了 设置 文本 格式 外 ,还 可 以 使 用 CSS 控制 网 页 中 块 级 别 元 素 的 格式 和 定位 。 块 级 元 素 是 一 
段 独立 的 内 容 ， 在 HTML 中 通常 由 一 个 新 行 分 隔 ， 并 在 视觉 上 设置 为 块 的 格式 。 例 如 ，hl 标签 、 
Pp 标签 和 div 标签 都 在 网 页 上 产生 块 级 元 素 。 可 以 对 块 级 元 素 执行 以 下 操作 : 为 它们 设置 边 距 和 
边框 、 将 它们 放置 在 特定 位 置 、 向 它们 添加 背景 颜色 、 在 它们 周围 设置 浮动 文本 等 。 对 块 级 元 素 
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进行 操作 实际 上 就 是 使 用 CSS 进行 页 面 布局 设置 的 方法 。 
8.2 ”CSS 基本 语 ; 


样式 表 基本 语法 如 下 : 

HTML 标志 {标志 属性 :属性 值 ， 标 志 属性 :属性 值 ， 标 志 属性 ， 属 性 值 …… } 

现在 首先 讨论 在 HTML 页 面 内 直接 引用 样式 表 的 方法 。 这 个 方法 必须 把 样式 表 信 息 包 括 在 
<style> 和 </style> 标 记 中 ， 为 了 使 样式 表 在 整个 页 面 中 产生 作用 ， 应 该 把 该 组 标记 及 其 内 容 放 到 
<head> 和 </head> 中 去 。 

例如 ， 要 设置 HTML 页 面 中 所 有 H1 标题 字 显 示 为 蓝 色 ， 其 代码 如 下 : 

<html> 

<head> 

<title>This is a CSS samples</title> 

<style type="text/css"> 

<!-- 

H1 {color: blue} 

--> 

</style> 

</head> 

<body> 

. .页 面 内 容 ... 

</body> 

</html> 


在 使 用 样式 表 过 程 中 , 经 常会 有 几 个 标志 用 到 同一 个 属性 , 例如 规定 HTML 页 面 中 凡是 粗 体 
字 、 和 斜体 字 、1 号 标题 字 ， 则 显示 为 红色 。 按 照 上 面 介绍 的 方法 应 书写 为 : 

B{ color: red} 

I{ color: red} 

Hl{ color: red} 

显然 这 样 书写 十 分 麻烦 ， 引 进 分 组 的 概念 会 使 其 变 得 简洁 明了 ， 可 以 写成 : 

B,I,Hl{color: red} 

用 逗号 分 隔 各 个 HTML 标志 ， 把 3 行 代码 合并 成 1 行 。 

此 外 ， 同 一 个 HTML 标志 ， 可 能 定义 多 种 属性 ， 例 如 ， 规 定 把 HI 一 H6 各 级 标题 定义 为 红色 
黑体 字 ， 带 下 划 线 ， 则 应 写 为 : 

HBH1，H2，H3，H4，H5，H6 { 

color: red; 


text-decoration: underline; 
font-family: "黑体 "} 
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8.3 设置 CSS 属性 


控制 网 页 元 素 外 观 的 CSS 样式 用 来 定义 字体 、 颜 色 、 边 距 和 字 间 距 等 属性 ， 可 以 使 用 
Dreamweaver 来 对 所 有 的 CSS 属性 进行 设置 。CSS 属性 被 分 为 9 大 类 : 类 型 、 背 景 、 区 块 、 方 框 、 
边框 、 列 表 、 定 位 、 扩 展 和 过 滤 ， 下 面 分 别 进行 介绍 。 


8.3.1 设置 CSS 类 型 属性 


在 CSS 样式 定义 对 话 框 左 侧 的 “分 类 ”列表 框 中 选择 “类 型 ”选项 ， 在 右 侧 可 以 设置 CSS 
样式 的 类 型 参数 ， 如 图 8-1 所 示 。 


图 8-1 选择 “类 型 ”选项 
在 “类 型 ”中 的 各 选项 参数 如 下 。 
@ Font-family: 用 于 设置 当前 样式 所 使 用 的 字体 。 
@ Font-size: 定义 文本 大 小 。 可 以 通过 选择 数字 和 度量 单位 来 选择 特定 的 大 小 ， 也 可 以 选择 
相对 大 小 。 
@ Font-style: 将 “正常 ">、“ 斜 体 ”或 “偏锋 体 ”指定 为 字体 样式 。 默 认 设 置 为 “正常 ”。 
@ Line-height: 设置 文本 所 在 行 的 高 度 。 该 设置 传统 上 称 为 “前 导 ”。 选择“ 正常 ”自动 计算 
字体 大 小 的 行 高 ， 或 输入 一 个 确切 的 值 并 选择 一 种 度量 单位 。 
@ Text-decoration: 向 文本 中 添加 下 划 线 、 上 划 线 或 删除 线 ， 或 使 文本 闪烁 。 正 常 文本 的 默认 
设置 是 “无 ”。“ 链 接 ” 的 默认 设置 是 “下 划 线 ”。 将 “链接 ”设置 为 “无 ”时 ， 可 以 通过 
定义 一 个 特殊 的 类 删除 链接 中 的 下 划 线 。 
Font-weight: 对 字体 应 用 特定 或 相对 的 粗 体 量 .。“ 正 常 ” 等 于 400,“ 粗 体 ”等 于 700。 
Font-variant: 设置 文本 的 小 型 大 写字 母 变量 。Dreamweaver 不 在 文档 窗口 中 显示 该 属性 。 
Text-transform: 将 选 定 内 容 中 的 每 个 单词 的 首 字母 大 写 或 将 文本 设置 为 全 部 大 写 或 小 写 。 
color: 设置 文本 颜色 。 


8.3.2 设置 CSS 背景 属性 


使 用 “CSS 规则 定义 ”对 话 框 的 “背景 ”类 别 可 以 定义 CSS 样式 的 背景 设置 。 可 以 对 网 页 中 
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的 任何 元 素 应 用 背景 属性 ， 如 图 8-2 所 示 。 
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图 8-2 选择 “背景 ”选项 

在 CSS 的 “背景 ”选项 中 可 以 设置 以 下 参数 。 

Background-color: 设置 元 素 的 背景 颜色 。 

@ Background-image: 设置 元 素 的 背景 图 像 。 可 以 直接 输入 图 像 的 路 径 和 文件 ， 也 可 以 单 击 

“浏览 ”按钮 选择 图 像 文件 。 

@ Background Repeat: 确定 是 否 以 及 如 何 重复 背景 图 像 。 包 含 4 个 选项 : “不 重复 ” 指 不 平 
铺 ， 图 像 只 展示 一 次 ;“ 重 复 ” 指 在 水 平和 垂直 方向 平 铺 图 像 ; “横向 重复 ”和 “纵向 重复 ” 
分 别 水 平方 向 平 销 和 垂直 方向 平 铺 。 

@ Background-attachment: 确定 背景 图 像 是 固定 在 它 的 原始 位 置 还 是 随 内 容 一 起 滚动 。 

@ Background-position (X ) 和 Background-position (Y ): 指定 背景 图 像 相 对 于 元 素 的 初始 位 
置 ， 这 可 以 用 于 将 背景 图 像 与 页 面 中心 垂 直 和 水 平 对 齐 。 如 果 背 景 图像 属 性 为 “固定 ”， 
则 位 置 相 对 于 文档 窗口 而 不 是 元 素 。 


8.3.3 设置 区 块 样式 


使 用 “CSS 规则 定义 ”对 话 框 的 “区 块 ” 类 别 可 以 定义 标签 和 属性 的 间距 和 对 齐 设置 ， 如 图 
8-3 所 示 。 


[一 oo 记 枉 (i i | 


图 8-3 选择 “区 块 ”选项 
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在 CSS 的 “区 块 ” 各 选项 中 参数 如 下 。 

@ Word-spacing: 设置 单词 的 间距 ， 若 要 设置 特定 的 值 ， 在 下 拉 列 表 框 中 选择 “ 值 "， 然 后 输 
入 一 个 数值 ， 在 第 二 个 下 拉 列 表 框 中 选择 度量 单位 。 

@ Letter-spacing: 增加 或 减 小 字母 或 字符 的 间距 。 若 要 减少 字符 间距 ， 指 定 一 个 负 值 。 

@ ”Vertical-align: 指定 应 用 它 的 元 素 的 径直 对 齐 方 式 . 仅 在 应 用 于 <img> 标 签 时 , Dreamweaver 
才 会 在 文档 窗口 中 显示 该 属性 。 

@ Text-align: 设置 元 素 中 的 文本 对 齐 方式 。 

@ Text-indent: 指定 第 一 行文 本 缩 进 的 大 小 。 可 以 使 用 负 值 创 建 凸 出 ， 但 该 显示 取决 于 浏览 
器 。 仅 在 标签 应 用 于 块 级 元 素 时 ，Dreamweaver 才 会 在 文档 窗口 中 显示 该 属性 。 

@ White-space: 确定 如 何 处 理 元 素 中 的 空白 。 从 下 面 3 个 选项 中 选择 : “正常 ” 指 收缩 空白 ; 

“保留 ”的 处 理 方式 与 文本 被 括 在 <pre> 标 签 中 一 样 ( 即 保留 所 有 空白 ， 包 括 空 格 、 制 表 

符 和 回 车 );“ 不 换行 ”指定 仅 当 遇 到 <br> 标 签 时 文本 才 换 行 。Dreamweaver 不 在 文档 窗口 
中 显示 该 属性 。 

@ Display: 指定 是 否 以 及 如 何 显示 元 素 。 


8.3.4 设置 CSS 方 框 属性 
使 用 “CSS 规则 定义 ”对 话 框 的 “ 方 框 ”类 别 可 以 用 于 控制 元 素 在 页 面 上 的 放置 方式 的 标签 


和 属性 定义 设置 ， 如 图 8-4 所 示 。 可 以 在 应 用 填充 和 边 距 设置 时 将 设置 应 用 于 元 素 的 各 边 ， 也 可 
以 使 用 “全 部 相同 ”设置 将 相同 的 设置 应 用 于 元 素 的 所 有 边 。 
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图 8-4 选择 “ 方 框 ” 选 项 
在 CSS 的 “ 方 框 ”各 选项 中 参数 如 下 。 
@ Width 和 Height: 设置 元 素 的 宽度 和 高 度 。 
@ Float: 设置 其 他 元 素 在 哪个 边 围 绕 元 素 浮动 .其 他 元 素 按 通常 的 方式 环绕 在 浮动 元 素 的 周围 。 
@ Clear: 定义 不 允许 AP Div 的 边 。 如 果 清 除 边 上 出 现 AP Div， 则 带 有 清除 设置 的 元 素 将 移 
到 该 AP Div 的 下 方 。 
@ Padding: 指定 元 素 内 容 与 元 素 边框 (如 果 没 有 边框 , 则 为 边 距 ) 之 间 的 间距 。 取消 选择 “全 
部 相同 ”选项 可 设置 元 素 各 个 边 的 填充 ;“ 全 部 相同 ”将 相同 的 填充 属性 应 用 于 元 素 的 Top、 


177 


( s IT 


Right、Bottom 和 Left 边 。 

@ Margin: 指定 一 个 元 素 的 边框 (如 果 没 有 边框 ， 则 为 填充 ) 与 另 一 个 元 素 之 间 的 间距 。 仅 
当 应 用 于 块 级 元 素 (段落 、 标 题 和 列表 等 ) 时 ，Dreamweaver 才 在 文档 窗口 中 显示 该 属性 。 
取消 选择 “全 部 相同 ”可 设置 元 素 各 个 边 的 边 距 ; “全 部 相同 ”将 相同 的 边 距 属性 应 用 于 
元 素 的 Top、Right、Bottom 和 Left 边 


8.3.5 设置 边框 样式 


CSS 的 “边框 ”类 别 可 以 定义 元 素 周围 边框 的 设置 ， 现 因 8-5 所 示 。 
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图 8-5 选择 “边框 ”选项 

在 CSS 的 “边框 ”各 选项 中 参数 如 下 。 

@ Style: 设置 边框 的 样式 外 观 。 样式 的 显示 方式 取决 于 浏览 器 。Dreamweaver 在 文档 窗口 中 
将 所 有 样式 呈现 为 实 线 。 取 消 选 择 “全 部 相同 ”可 设置 元 素 各 个 边 的 边框 样式 ; “全 部 相 
同 ” 将 相同 的 边框 样式 属性 应 用 于 元 素 的 Top、Right、Bottom 和 Left 边 。 

@ ”Width: 设置 元 素 边框 的 粗细 。 取 消 选择 “全 部 相同 ”可 设置 元 素 各 个 边 的 边框 宽度 ; “全 
部 相同 ”将 相同 的 边框 宽度 应 用 于 元 素 的 Top、Right、Bottom 和 Left 边 。 

@ Color: 设置 边框 的 颜色 。 可 以 分 别 设置 每 个 边 的 颜色 。 取 消 选 择 “ 全 部 相同 ”可 设置 元 素 
各 个 边 的 边框 颜色 ; “全 部 相同 ”将 相同 的 边框 颜色 应 用 于 元 素 的 Top、Right、Bottom 和 
Left 边 。 


8.3.6 设置 CSS 列表 属性 


CSS 的 “列表 ”类 别 为 列表 标签 定义 列表 设置 ， 如 图 8-6 所 示 。 
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8-6 选择 “列表 ”选项 
在 CSS 的 “列表 ”各 选项 中 参数 如 下 。 


@ List-style-type: 设置 项 目 符号 或 编号 的 外 观 。 
@ List-style-image: 可 以 为 项 目 符号 指定 自 定 义 图 像 。 单 击 “ 浏 览 ” 按 钮 选择 图 像 ， 或 输入 


图 像 的 路 径 。 
@ List-style-position: 设置 列表 项 文本 是 否 换行 和 缩 进 ( 外 部 ) 以 及 文本 是 否 换行 到 左边 距 ( 内 
部 )。 


8.3.7 设置 CSS 定位 属性 


CSS 的 “定位 ”样式 属性 使 用 “ 层 ” 首 选 参数 中 定义 层 的 默认 标签， 将 标签 或 所 选 文本 块 更 
改 为 新 层 ， 如 图 8-7 所 示 。 
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图 8-7 选择 “定位 ”选项 
在 CSS 的 “定位 ”选项 中 各 参数 如 下 。 


@ Position: 在 CSS 布局 中 ，Position 发 挥 着 非常 重要 的 作用 ， 很 多 容器 的 定位 是 用 Position 
来 完成 。Position 属性 有 4 个 可 选 值 ， 它 们 分 别 是 static、absolute、fixed 和 relative。 
> absolute: 能 够 很 准确 地 将 元 素 移 动 到 想 要 的 位 置 ， 绝 对 定位 元 素 的 位 置 。 
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> fixed: 相对 于 窗口 的 固定 定位 。 
> relative: 相对 于 元 素 默 认 的 位 置 的 定位 。 
> static: 该 属性 值 是 所 有 元 素 定位 的 默认 情况 ， 在 一 般 情 况 下 ， 我 们 不 需要 特别 地 去 声 
明 它 , 但 有 时 候 遇 到 继承 的 情况 ， 不 愿意 见 到 元 素 所 继承 的 属性 影响 本 身 ， 因 而 可 以 
用 position:static 取消 继承 ， 即 还 原 元 素 定位 的 默认 值 。 
@ Visibility: 如 果 不 指定 可 见 性 属性 ， 则 默认 情况 下 大 多 数 浏览 器 都 继承 父 级 的 值 。 
@ Placement: 指定 APDiv 的 位 置 和 大 小 。 
@ Clip: 定义 AP Div 的 可 见 部 分 。 如 果 指 定 了 剪辑 区 域 ， 可 以 通过 脚本 语言 访问 它 ， 并 操作 
属性 以 创建 像 擦 除 这 样 的 特殊 效果 。 通 过 使 用 “改变 属性 ”行为 可 以 设置 这 些 擦 除 效果 。 


8.3.8 设置 CSS 扩展 属性 


“扩展 ” 样式 属性 包含 两 部 分 ， 如 图 8-8 所 示 。 
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图 8-8 选择 “扩展 ”选项 
Page-break-before: 这 个 属性 的 作用 是 为 打印 的 页 面 设置 分 页 符 。 
Page-break-after: 检索 或 设置 对 象 后 出 现 的 页 分 割 符 。 
Cursor: 指针 位 于 样式 所 控制 的 对 象 上 时 改变 指针 图 像 。 
Filter: 对 样式 所 控制 的 对 象 应 用 特殊 效果 。 


8.3.9 过 渡 样 式 的 定义 
在 过 去 几 年 中 ， 大 多 数 都 是 使 用 JavaScript 来 实现 过 渡 效 果 。 使 用 CSS 可 以 实现 同样 的 过 渡 


效果 。“ 过 渡 ” 样 式 属性 如 图 8-9 所 示 。 过 渡 效果 最 明显 的 表现 就 是 当 用 户 把 鼠标 悬 停 在 某 个 元 素 
上 时 高 亮 显示 ， 如 链接 、 表 格 、 表 音域、 按钮 等 。 过 渡 可 以 给 页 面 增加 一 种 非常 平滑 的 外 观 。 
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图 8-9 选择 “过 渡 ” 选 项 
属性 : 单 击 二 以 向 过 渡 效 果 添 加 CSS 属性 。 
持续 时 间 : 以 秒 或 毫秒 为 单位 输入 过 渡 效 果 的 持续 时 间 。 
延迟 时 间 : 以 秒 或 毫秒 为 单位 ， 在 过 渡 效 果 开 始 之 前 。 
计时 功能 : 从 可 用 选项 中 选择 过 渡 效 果 样式 。 


8.4 ”链接 到 | 或 导出 外 部 CSS 样式 表 


链接 外 部 样式 表 可 以 方便 地 管理 整个 网 站 中 的 网 页 风格 ， 它 让 网 页 的 文字 内 容 与 版 面 设计 分 
开 ， 只 要 在 一 个 CSS 文档 中 定义 好 网 页 的 外 观 风格 ， 所 有 链接 到 此 CSS 文档 的 网 页 ， 便 会 按照 
此 风格 显示 网 页 。 


8.4.1 小 实例 一 一 创建 内 部 样式 表 
内 部 样式 表 只 包含 在 当前 操作 的 网 页 文档 中 ， 并 仅 应 用 于 相应 的 网 页 文档 。 因 此 ， 在 制作 背 
景 网 页 的 过 程 中 ， 可 以 随时 创建 内 部 样式 表 ， 创 建 CSS 内 部 样式 表 的 具体 操作 步骤 如 下 。 


步 又 014 在 文档 中 选择 应 用 样式 的 文本 ， 单 击 鼠标 右键 ， 在 弹出 的 菜单 中 选择 “CSS 样式 ” |“ 新 
建 ”命令 ， 弹 出 “新 建 CSS 规则 ”对 话 框 ， 如 图 8-10 所 示 。 
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图 8-10 “新 建 CSS 规则 ”对 话 框 
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在 “新 建 CSS 规则 ”对 话 框 中 可 以 设置 以 下 参数 。 
@ 选择 器 类 型 : 用 来 定义 样式 类 型 ， 并 将 其 运用 到 特定 的 部 分 。 如果 选择 “类 ”选项 ， 需 要 
在 “名 称 ” 下 拉 列 表 中 输入 自 定 义 样 式 的 名 称 ， 其 名 称 可 以 是 字母 和 数字 的 组 合 ， 如 果 没 
有 输入 符号 “.”，Dreamweaver 会 自动 输入 ; 如 果 选 择 “ 标 签 ” 选 项 ， 需 要 在 “标签 ”下 
拉 列 表 中 选择 一 个 HTML 标签 ， 也 可 以 直接 在 “标签 ”下 拉 列 表 中 输入 这 个 标签 ; 如 果 选 
择 “ 高 级 ”选项 ， 需 要 在 “选择 器 ”下 拉 列 表 中 选择 一 个 选择 器 的 类 型 ， 也 可 以 在 “选择 
器 ”下 拉 列 表 中 输入 一 个 选择 器 类 型 。 
@ 选择 器 名 称 : 用 来 设置 新 建 的 样式 表 的 名 称 。 
@ 规则 定义 : 用 来 设置 新 建 的 CSS 语句 的 位 置 。 CSS 样式 按照 使 用 方法 可 以 分 为 内 部 样式 和 
外 部 样式 。 如 果 想 把 CSS 语句 新 建 在 网 页 内 部 ， 可 以 选择 “ 仅 限 该 文档 ”选项 。 
在 对 话 框 中 ， 如 果 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “标签 ”选项 ， 则 在 “选择 器 名 称 ” 下 
方 的 下 拉 列 表 中 可 以 选择 一 个 HTML 标签， 也 可 以 直接 输入 这 个 标签 ， 如 图 8-11 所 示 。 
如 果 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “复合 内 容 ” 选 项 ， 则 要 在 “选择 器 名 称 ” 下 拉 列 表 
中 选择 一 种 选择 器 名 称 ， 也 可 以 直接 输入 一 种 选择 器 名 称 ， 如 图 8-12 所 示 。 


过 捍 罚 类 型- 
为 cs9 向 捍 上 下 六 这 反 吕 类 型 
(Hm asx mm i] >] 


选择 器 名 称 - 远 择 亚 名 称 - 
话 择 或 箱 入 计 往 以 名 称 * 过 择 或 笨 入 选 反 吕 名称， 


全 疯 I : | E 
i 和 


图 8-11 在 “选择 器 类 型 ”中 选择 “标签 ”选项 图 8-12 在 “选择 器 类 型 ”中 选择 “复合 内 容 ” 选 项 

步骤 02h 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ”选项 ， 然 后 在 “选择 器 名 称 ” 中 输入 .bt。 由 
于 创建 的 是 CSS 内 部 样式 表 ， 所 以 在 “规则 定义 ”下 拉 列 表 中 选择 “ 仅 限 该 文档 ” 选 
项 ， 如 图 8-13 所 示 。 

步骤 034 单 击 “确定 ”按钮 ， 弹 出 “.bt 的 CSS 规则 定义 ”对 话 框 ， 在 对 话 框 中 将 Fontfamily 设 
置 为 宋体 ，Font-size 设置 为 12 像素 ，Line-height 设置 为 200%，Color 设置 为 #00， 如 
图 8-14 所 示 。 
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为 Gs 和 是 旦 上 T 广 迄 芭 加 kB _ 
Eee ha 和 

Tatsint): 了 区 Patvei 

Font-style OD): 

Gineheitht 0): D0 Tert-trastom BR) 


Tareecoratia 0): mterline (WCawt) :mo 
画 ) 


亡 难 [了 消 ] RAW | 


8-13 选择 “类 ”选项 并 输入 选择 器 名 称 图 8-14 “.bt 的 CSS 规则 定义 ”对 话 框 
步骤 044 单 击 “ 确 定 ”按钮 ， 在 “CSS 设计 EE 
器 ”面板 中 可 以 看 到 新 建 的 样式 表 p33 
和 属性 ， 如 图 8-15 所 示 。 让 
“CSS 设计 器 ”面板 由 以 下 窗 格 组 成 。 
日 源 : 列 出 与 文档 相关 的 所 有 CSS 样式 一 一 一 
表 。 使 用 此 窗 格 ， 可 以 创建 CCS 并 将 SE 
其 附加 到 文档 ， 也 可 以 定义 文档 中 的 FE YE 
样式 。 
@ @ 媒 体 : 在 “ 源 ” 窗 格 中 列 出 所 选 源 
的 全 部 媒体 查询 。 如 果 不 选择 特定 rm 
CSS, 则 此 窗 格 将 显示 与 文档 关联 的 所 图 8.15 新 建 的 内 部 样式 表 


有 媒体 查询 。 

@ 选择 器 : 在 “ 源 ” 窗 格 中 列 出 所 选 源 的 全 部 选择 器 。 如 果 同 时 还 选择 了 一 个 媒体 查询 ， 则 
此 窗 格 会 为 该 媒体 查询 缩小 选择 器 列表 范围 。 如 果 没 有 选择 CSS 或 媒体 查询 , 则 此 窗 格 将 
显示 文档 中 的 所 有 选择 器 。 在 “@ 媒 体 ” 窗 格 中 选择 “全 局 ”后 ， 将 显示 对 所 选 源 的 媒体 
查询 中 不 包括 的 所 有 选择 器 。 

@ 属性 : 显示 可 为 指定 的 选择 器 设置 的 属性 。 


8.4.2 小 实例 一 一 创建 外 部 样式 表 


外 部 样式 表 是 一 个 独立 的 样式 表 文 件 ， 保 存在 本 地 站 点 中 。 外 部 样式 表 不 仅 可 以 应 用 在 当前 
的 文档 中 ， 还 可 以 根据 需要 应 用 在 其 他 的 网 页 文档 中 ， 甚 至 在 整个 站 点 中 应 用 。 
创建 外 部 CSS 样式 表 的 具体 操作 步骤 如 下 。 
步骤 014 执行 “窗口 ”|“CSS 设计 器 ”命令 ， 打 开 “CSS 设计 器 ”面板 。 在 “CSS 设计 器 ” 面 
板 中 单 击 “ 添 加 CSS 源 ”按钮 用 加， 在 弹出 的 下 拉 菜 单 中 选择 “创建 新 的 CSS 样式 ” 选 
项 ， 如 图 8-16 所 示 。 
步骤 024 弹出 “创建 新 的 CSS 文件 ”对 话 框 ， 单 击 对 话 框 中 的 “文件 /URL” 文 本 框 右边 的 “ 浏 
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( s IT 


览 ”按钮 ， 如 图 8-17 所 示 。 


， 有 条 件 使 用 【可 选 ) 


Se 局 标本 < 新 内 联 宇 式 > 了 
[Ecs] Ml |[ Es BD ] 
图 8-16 选择 “创建 新 的 CSS 文件 ”选项 图 8-17 “创建 新 的 CSS 文件 ”对 话 框 


步骤 034 弹出 “将 样式 表 文件 另存 为 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 样式 表 文 件 的 名 称 ， 
并 在 “相对 于 ”下 拉 列 表 中 选择 “文档 ”选项 ， 如 图 8-18 所 示 。 

步 野 044 单 击 “ 保 存 ” 按钮 , 弹出 “创建 新 的 CSS 文件 ”对 话 框 , 将 CSS 样式 添加 到 “文件 /URL” 
文本 框 中 ， 如 图 8-19 所 示 。 

步 最 054 单 击 “ 确 定 ”按钮 ， 在 文档 窗口 中 可 以 看 到 新 建 的 外 部 样式 表 文件 ， 如 图 8-20 所 示 。 


村 样式 表 文 件 另 Pr 本 
: 区 
选择 文件 名 自 - 加 
| 人 | 文件 系统 站 点 和 服务 器 
| 
{MED ote 下 
没有 与 当家 条件 区 本 的 项 。 
Ee 让 
人 人 天 型 0 [二 人 Sa 
[区 i 外 
相生 
在 8 上证 尽 中 一 = 本 
要 全 用 此 过 古 ， 请 人 六 件 * 


8-18 “将 样式 表 文 件 另 存 为 ”对 话 框 8-19 “创建 新 的 CSS 文件 ”对 话 框 


a 时 居 硬 。 民 。。 十 3 击 2e 


- LIE 还: 
TEST 
8-20 ”新 建 的 外 部 样式 表 文件 
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8.4.3 ”小 实例 一 一 链接 外 部 样式 表 


编辑 外 部 CSS 样式 表 时 ， 链 接 到 该 CSS 样式 表 的 所 有 文档 将 会 全 部 更 新 ， 以 反映 所 做 的 修 
改 。 用 户 可 以 导出 文档 中 包含 的 CSS 样式 以 创建 新 的 CSS 样式 表 ， 然 后 附加 或 链接 到 外 部 样式 
表 以 应 用 其 中 所 包含 的 样式 。 链 接 外 部 样式 表 的 效果 如 图 8-21 所 示 ， 具 体 的 操作 步骤 如 下 。 


8-21 ”链接 外 部 样式 表 效 果 


原始 文件 ， 原始 文 件 /08/8.4.3/index.html 
最 终 文件 ， 最 终 文件 /08/8.4.3/index1.html 


步骤 01 打开 网 页 文档 ， 如 图 8-22 所 示 。 
步 野 024 执行 “窗口 ”| “CSS 设计 器 ” 命令， 打开 “CSS 设计 器 ”面板 ,在 面板 中 单 击 “ 添 加 CSS 
源 ” 按钮， 在 弹出 的 下 拉 菜 单 中 选择 “附加 现 有 的 CSS 文件 ”命令 ， 如 图 8-23 所 示 。 


十。 加 0OLIslLxj 


Dw Be. Ch Olel*] Dw 
0 He EM SA oaM Wo aato wees gow seh 

sme | - 
PE 


a 
no ee 
nblr 


ET ER TFT 于 


图 8-22 ”打开 网 页 文档 图 8-23 ”选择 “附加 现 有 的 CSS 文件 ”命令 


步 曼 034 弹出 “使 用 现 有 的 CSS 文件 ”对 话 框 ， 在 该 对 话 框 中 单 击 “ 文 件 /URL” 下 拉 列 表 框 右 
侧 的 “浏览 ”按钮 ， 如 图 8-24 所 示 。 

步 又 044 弹出 “选择 样式 表 文件 ”对 话 框 ， 在 对 话 框 中 选择 images 文件 夹 中 的 body.css 文件 ， 
如 图 8-25 所 示 。 
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宗 册 ,COLOK: #004929; 
FONT-SIIE: 12px 


mI 

| -一 -一 TIEE-EEICRTY 

i 已 名 = re 150W; FORT-PAITLT: 宁 
OM i ~ -COLOR: +001929 


， 有 条件 使 用 (可 选 ) 


文件 fcsg) 
E33 


图 8-24 “使 用 现 有 的 CSS 文件 ”对 话 框 图 8-25 “选择 样式 表 文 件 ” 对 话 框 

步骤 054 单 击 “ 确 定 ”按钮 ， 将 文件 添加 到 对 话 框 中 ， 在 “添加 为 ”选项 中 选择 “链接 ” 单 选 
按钮 ， 如 图 8-26 所 示 。 

步 最 064 单 击 “ 确 定 ”按钮 ， 链 接 外 部 样式 表 ， 效 果 如 图 8-27 所 示 。 


Dw 西 - th Ol-lol x 


Css 
人 
/URL [maoesbody.ss 2 A 
SEC- 首尾 站 村 39 厅 旬 ， 人 的 1 等 吕 大 396 划 ， 而 全 
测 凡 : [D310) Poi WRN Run Bar oan 
OMm i Em, Ape pais en me 
mee 

， 有 条 件 使 用 (本 选 和 和 习 计 、 扩 辽 硬 区 、 才 各 引入 县 向 坟 直 月 风 移 闪 枚 生计， 力 六 在 3 方 胡 玫 的 | 
E23 一 一 一 一 一; Ea 
CC mao no ITD DT 是 玫 wsxs 


图 8-26 添加 文件 图 8-27 链接 外 部 样式 表 
步骤 07 人 保存 网 页 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 8-21 所 示 。 


8.5 实战 


使 用 CSS 样式 可 以 灵活 并 更 好 地 控制 页 面 外 观 , 即 从 精确 的 布局 定位 到 特定 的 字体 和 文本 样 
式 。 下 面 通过 实例 介绍 如 何在 网 页 中 创建 和 应 用 CSS 样式 。 


实战 1 一 一 应 用 CSS 样式 固定 字体 大 小 


利用 CSS 可 以 固定 字体 大 小 , 使 网 页 中 的 文本 始终 不 随 浏览 器 改变 而 发 生变 化 ， 总 是 保持 着 
原 有 的 大 小 ， 应 用 CSS 固定 字体 大 小 的 效果 如 图 8-28 所 示 ， 具 体 的 操作 步骤 如 下 。 


186 


第 8 章 使 用 CSS 样式 表 美 化 网 页 (9 


图 8-28 应 用 CSS 美化 字体 的 效果 


原始 文件 ， 原始 文件 /08/ 实 战 1/index.html 
最 终 文件 : 最 终 文件 /08/ 实 战 1/index1l .html 


步 又 014 打开 网 页 文档 ， 如 图 8-29 所 示 。 
Dw 十 Ch Ol-lel x | 


项 攻 乐园 和 介入 在 纹 位 筹 : 首页 成 上 和 加 


二 二 


| 
| 
pr er ee me 


or) Le ND le Or AD CQ CE EFE 


图 8-29 打开 网 页 文档 


步骤 024 选中 文档 中 的 文本 并 单 击 鼠 标 右键 ,在 弹出 的 快捷 莱 单 中 执行 “CSS 样式 ”|“ 新 建 ” 
命令 ， 如 图 8-30 所 示 。 

步骤 034 弹出 “新 建 CSS 规则 ”对 话 框 ， 在 对 话 框 中 的 “选择 器 类 型 ”中 选择 “类 ”， 在 “ 选 
择 器 名 称 ” 中 输入 名 称 ， 在 “规则 定义 ”中 选择 “ 仅 限 该 文档 ”， 如 图 8-31 所 示 。 

步骤 044 单 击 “确定 ”按钮 ， 弹 出 “.yangshi 的 CSS 规则 定义 ”对 话 框 ， 将 Font-family 设置 为 
宋体 ，Font-size 设 为 12px，Color 设置 为 #1297D2，Line-height 设置 为 3em， 如 图 8-32 
所 示 。 
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8-30 ”执行 “新 建 ” 命 令 
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过关 三 轴 入 地 拼 器 名称。 国 Pe 
| “二 策 员 和 忆 卫 Feet) Dt caw tr) ‘ree 
| ine-through 0) 

iy) 
| 和 三 one 有 
ED ET CW | | | 
L tt 一 
图 8-31 “新 建 CSS 规则 ”对 话 框 图 8-32 “.yangshi 的 CSS 规则 定义 ”对 话 框 
步 双 05 人 单 击 “ 确 定 ”按钮 ， 新 建 CSS 样式 。 选 中 要 应 用 样式 的 文本 ， 单 击 “ 属 性 ”面板 中 “ 目 


标 规则 ”右边 的 列表 框 ， 在 弹出 的 列表 框 中 选择 样式 ， 如 图 8-33 所 示 。 


Dw Bs- Eh Ol-lol x] 
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图 8-33 ”应 用 样式 
步骤 064 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 8-28 所 示 。 
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实战 2 


应 用 CSS 样式 制作 阴影 文字 


使 用 CSS 样式 制作 阴影 文字 ， 其 效果 如 图 8-34 所 示 ， 具 体 的 操作 步骤 如 下 。 


Fr IN A 0 a 04 TEM 
TE 

Nos a Reto 

cm) Ea FARR HL NEW RE 

SE pA. Re 人 


图 8-34 CSS 样式 制作 阴影 文字 的 效果 
原始 文件 : 原始 文 件 /08/ 实 战 2/index.html 
最 终 文件 ， 最 终 文件 /08/ 实 战 2/index1 .html 


步骤 014 打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 执 行 “ 插 入 ”| “表格” 命令 ， 插 入 1 行 1 列 的 表 
格 ，“ 表 格 宽度 ”设置 为 40%， 如 图 8-35 所 示 。 
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图 8-35 打开 网 页 文档 
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步骤 024 将 光标 置 于 表格 内 ， 输 入 文字 ， 如 图 8-36 所 示 。 


图 8-36 输入 文字 


步骤 034 选择 表格 并 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 如 
图 8-37 所 示 。 


Dw 已 王 
2 ml EV KAM Wo IO 95 Wal QOW MMe 
due xx rr 


E_n | Wn [4 | Fa 。 二 村 且 : NF 


图 8-37 选择 “新 建 ” 命 令 


步骤 044 单 击 “确定 ”按钮 , 弹出 “新 建 CSS 规则 ”对 话 框 , 在 “选择 器 名 称 ” 文本 框 中 输入 .yinying， 
在 “选择 器 类 型 ”中 选择 “类 ”，“ 规 则 定义 ”中 选择 “ 仅 限 该 文档 ”， 如 图 8-38 所 示 。 


选 笠 等 类 型: 
为 5SS 规 周 择 上下文 过 反问 夫 潮 。 上 要 站 
a 
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-法理 或 信和 造反 加 名 床 ” 
Rh- | 
| 
规则 定义 - 
先天 定 尺 检 朋 抬 9 位 置 。 
本 Cm | 


图 8-38 “新 建 CSS 规 则 ”对 话 框 
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步 最 054 单 击 “确定 ”按钮 ， 弹 出 “. yinying 的 CSS 规则 定义 ”对 话 框 选择 “分 类 ”中 的 “类 
型 ”选项 ，Font-family 设置 为 宋体 ， Font-size 设置 为 24px，Font-weight 设置 为 normal， 
color 设置 为 #900， 如 图 8-39 所 示 。 

步骤 06M 单 击 “ 应 用 ”按钮 , 选择 “分 类 ”中 的 “扩展 ”选项 , 在 Filter 中 选择 “Shadow(Color=? ， 
Direction=? )”， 如 图 8-40 所 示 。 

sa 


Tagertreakbatore@) 
Paee-bregr sft 


扩展 


Pagerbresc before (B) 
Paee-broue sfter OD) 


图 8-41 设置 阴影 


步 又 08 4 单 击 “ 确 定 ” 按 钮 ,创建 样式 . 选中 文档 中 的 表格 ， 打开“ 属性” 面板， 在 面板 的 Class 
中 选择 新 建 的 样式 ， 如 图 8-42 所 示 。 
步骤 094 应 用 样式 后 ,保存 网 页 文档 , 按 F12 键 在 浏览 器 中 预览 阴影 文字 效果 ， 如 图 8-34 所 示 。 
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网 页 设计 与 网 站 建设 全 攻略 
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图 8-42 ”选择 应 用 
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第 9 章 用 CSS+DIV 灵活 布局 页 面 | 


本 章 导 读 


CSS 和 DIV 的 结构 被 越 来 越 多 的 人 采纳 ,很 多 人 都 抛 齐 了 表格 而 使 用 CSS 来 布局 页 面 ， 
它 的 好 处 很 多 ， 可 以 使 结构 简洁 、 定 位 更 灵活 ，CSS 布局 的 最 终 目的 是 搭建 完善 的 页 面 架 构 。 
通常 在 XHTML 网 站 设计 标准 中 ， 不 再 使 用 表格 定位 技术 ， 而 是 采用 CSS+DIV 的 方式 实现 各 
种 定位 。 
初 识 DIV 
掌握 CSS 定位 
掌握 CSS+DIV 布局 的 常用 方法 
掌握 常见 的 布局 类 型 
利用 模板 制作 CSS 布局 网 页 


9.1 初 识 DIV 


在 CSS 布局 的 网 页 中 ，<Div> 与 <Span> 都 是 常用 的 标记 , 利用 这 两 个 标记 ， 加 上 CSS 对 其 样 
式 的 控制 ， 可 以 很 方便 地 实现 网 页 的 布局 。 


9.1.1 DIV 概述 


DIV 是 CSS 中 的 定位 技术 ， 在 Dreamweaver 中 将 其 进行 了 可 视 化 操作 。 文 本 、 图 像 和 表格 
等 元 素 只 能 固定 其 位 置 ， 不 能 互相 县 加 在 一 起 。 使 用 DIV 功能 ， 可 以 将 其 放置 在 网 页 中 的 任何 位 
置 ， 还 可 以 按 顺 序 排放 网 页 文档 中 的 其 他 构成 元 素 。 层 体现 了 网 页 技术 从 二 维 空间 向 三 维 空间 的 
一 种 延伸 。 将 DIV 和 行为 综合 使 用 ,就 可 以 不 使 用 任何 的 JavaScript 或 HTML 编码 来 创作 出 动画 
效果 。 

DIV 的 功能 主要 有 以 下 3 个 方面 。 


@ 重 登 排放 网 页 中 的 元 素 : 利用 DIV， 可 以 实现 不 同 的 图 像 重 登 排 列 ， 而 且 可 以 随意 改变 排 
列 的 顺序 。 

@ 精确 的 定位 : 单 击 DIV 上 方 的 四 边 形 控制 手柄 ， 将 其 拖 动 到 指定 位 置 ， 就 可 以 改变 层 的 位 
置 。 如 果 要 精确 定位 AP DIV 在 页 面 中 的 位 置 ， 可 以 在 DIV 的 属性 面板 中 输入 精确 的 数值 
坐标 。 如 果 将 DIV 的 坐标 值 设 置 为 负数 ，DIV 会 在 页 面 中 消失 。 

@ 显示 和 隐藏 AP DIV: AP DIV 的 显示 和 隐藏 可 以 在 AP DIV 面板 中 完成 。 当 AP DIV 面板 
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中 的 AP DIV 名 称 前 显示 的 是 “闭合 眼睛 ”的 图 标 时 ， 表示 AP DIV 被 隐藏 ; 当 AP DIV 面 
板 中 的 AP DIV 名 称 前 显示 的 是 “ 睁 开眼 睛 ”的 图 标 时 ， 表 示 AP DIV 被 显示 。 


9.1.2 CSS+DIV 布局 的 优势 


掌握 基于 CSS 的 网 页 布局 方式 ， 是 实现 Web 标准 的 基础 。 在 主页 制作 时 采用 CSS 技术 ， 可 
以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 地 控制 。 只 要 对 相应 的 代码 
做 一 些 简单 的 修改 ， 就 可 以 改变 网 页 的 外 观 和 格式 。 采 用 CSS 布局 有 以 下 优点 。 

@ 大 大 缩减 页 面 代码 ， 提 高 页 面 浏览 速度 ， 缩 减 带宽 成 本 。 

@ 结构 清晰 ， 容 易 被 搜索 引擎 搜索 到 。 

@ 缩短 改版 时 间 ， 只 要 简单 地 修改 几 个 CSS 文 件 , 就 可 以 重新 设计 一 个 拥有 成 百 上 千 页 面 的 

站 点 。 
@ 强大 的 字体 控制 和 排版 能 
@ CSS 非常 容易 编写 ， 可 以 像 写 html 代码 一 样 轻 松 编写 CSS。 
@ 提高 易 用 性 ， 使 用 CSS 可 以 结构 化 HTML， 如 <p> 标 记 只 用 来 控制 段落 ，heading 标记 只 
用 来 控制 标题 ，table 标记 只 用 来 表现 格式 化 的 数据 等 。 

@ 表现 和 内 容 相 分 离 ， 将 设计 部 分 分 离 出 来 放 在 一 个 独立 样式 文件 中 。 

@ 更 方便 搜索 引擎 的 搜索 , 使 用 只 包含 结构 化 内 容 的 HTML 代替 嵌 套 的 标记 , 搜索 引擎 将 更 
有 效 地 搜索 到 内 容 。 

@ table 布局 灵活 性 不 大 ， 只 能 遵循 table、tr、td 的 格式 ， 而 DIV 可 以 有 各 种 格式 。 

@ 在 table 布局 中 ， 垃圾 代码 会 很 多 ， 一些 修饰 的 样式 和 布局 的 代码 混合 在 一 起 ， 很 不 直观 。 
而 DIV 更 能 体现 样式 和 结构 相 分 离 ， 结 构 的 重 构 性 强 。 

@ 在 几乎 所 有 的 浏览 器 上 都 可 以 使 用 。 

@ ”以 前 一 些 必须 通过 图 片 转换 实现 的 功能 , 现在 只 要 用 CSS 就 可 以 轻松 实现 , 从 而 更 快 地 下 
载 页 面 。 

@ 使 页 面 的 字体 变 得 更 漂亮 ， 更 容易 编排 ， 使 页 面 真正 赏心悦目 。 

@ 可 以 轻松 地 控制 页 面 的 布局 。 

@ 可 以 将 许多 网 页 的 风格 格式 同时 更 新 ， 不 用 再 一 页 一 页 地 更 新 了 。 可 以 将 站 点 上 所 有 的 网 

页 风格 都 使 用 一 个 CSS 文件 进行 控制 ， 只 要 修改 这 个 CSS 文件 中 相应 的 内 容 ， 那 么 整个 
站 点 的 所 有 页 面 都 会 随 之 发 生变 动 。 


9.1.2 创建 DIV 


可 以 将 DIV 理解 为 一 个 文档 窗口 内 的 又 一 个 小 窗口 ， 像 在 普通 窗口 中 的 操作 一 样 ， 在 DIV 
中 可 以 输入 文字 ， 也 可 以 插入 图 像 、 动 画 影像 、 声 音 、 表 格 等 ， 对 其 进行 编辑 。 创 建 DIV 的 具体 
操作 步骤 如 下 。 


步骤 014 新 建 空 白文 档 ， 执 行 “ 插 入 ”|“Div 标签 ”命令 ， 如 图 9-1 所 示 。 
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图 9-1 执行 “Div 标签” 命令 


步骤 024 弹出 “插入 Div” 对话 框 ， 如 图 9-2 所 示 。 
BAD i 
2 1 | 功 下 
新 建 CSS 规 中 | 

图 9-2 “插入 Div” 对 话 框 

步骤 034 单 击 “ 确 定 ” 按 钮 ， 插 入 Div 标签 ， 如 图 9-3 所 示 
Dw 珊 - 0-lelx] 
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图 9-3 插入 Div 标签 


9.2 CSS 定位 
CSS 对 元 素 的 定位 包括 相对 定位 和 绝对 定位 ， 同 时 还 可 以 把 相对 定位 和 绝对 定位 结合 起 来 ， 


形成 混合 定位 。 
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9.2.1 盒子 模型 


如 果 想 熟练 掌握 DIV 和 CSS 的 布局 方法 , 首先 要 对 盒子 模型 有 足够 的 了 解 。 盒 子 模 型 是 CSS 
布局 网 页 时 非常 重要 的 概念 ， 只 有 很 好 地 掌握 了 盒子 模型 以 及 其 中 每 个 元 素 的 使 用 方法 ， 才 能 真 
正 地 布局 网 页 中 各 个 元 素 的 位 置 。 

所 有 页 面 中 的 元 素 都 可 以 看 作 一 个 装 了 东西 的 盒子 ， 盒 子 里 面 的 内 容 到 盒子 的 边框 之 问 的 距 
离 即 填充 (padding), 盒子 本 身 有 边框 (border), 而 盒子 边框 外 和 其 他 盒子 之 间 , 还 有 边界 (margin ) 。 

一 个 盒子 由 4 个 独立 部 分 组 成 ， 如 图 9-4 所 示 。 


content 


图 9-4 盒子 模型 图 

最 外 面 的 是 边界 (margin); 第 二 部 分 是 边框 (border)， 边 框 可 以 有 不 同 的 样式 ， 第 三 部 分 
是 填充 (padding)， 填 充 用 来 定义 内 容 区 域 与 边框 (border) 之 间 的 空白 ;第 四 部 分 是 内 容 区 域 。 

填充 、 边 框 和 边界 都 分 为 “上 、 右 、 下 、 左 ”4 个 方向 ， 既 可 以 分 别 定义 ， 也 可 以 统一 定义 。 
当 使 用 CSS 定义 盒子 的 width 和 height 时 ， 定 义 的 并 不 是 内 容 区 域 、 填 充 、 边 框 和 边界 所 占 的 总 
区 域 ， 实 际 上 定义 的 是 内 容 区 域 content 的 width 和 height。 为 了 计算 盒子 所 占 的 实际 区 域 ， 必 须 
加 上 padding、border 和 margin。 

实际 宽度 = 左边 界 + 左 边框 + 左 填充 + 内 容 宽 度 〈width) + 右 填充 + 右边 框 + 右边 界 

实际 高 度 = 上 边界 + 上 边框 + 上 填充 + 内 容 高 度 (height) + 下 填充 + 下 边框 + 下 边界 


9.2.2 ”元素 的 定位 

CSS 对 元 素 的 定位 包括 相对 定位 和 绝对 定位 , 同时 , 还 可 以 把 相对 定位 和 绝对 定位 结合 起 来 ， 
形成 混合 定位 。 

1. position 属性 


position 的 原意 为 位 置 、 状 态 、 安 置 。 在 CSS 布局 中 ，position 属性 非常 重要 ， 很 多 特殊 容器 
的 定位 必须 用 position 来 完成 。position 属性 有 4 个 值 ， 分 别 是 static、absolute、fixed 和 relative。 
position 定位 允许 用 户 精确 定义 元 素 框 出 现 的 相对 位 置 ， 可 以 相对 于 它 通 常 出 现 的 位 置 、 相 
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对 于 其 上 级 元 素 、 相 对 于 另 一 个 元 素 或 者 相对 于 浏览 器 视窗 本 身 。 每 个 显示 元 素 都 可 以 用 定位 的 
方法 来 描述 ， 而 其 位 置 由 此 元 素 的 包含 块 来 决定 。 

语法 : 

Position: static | absolute | fixed | relative 


static 表示 默认 值 ， 无 特殊 定位 ， 对 象 遵循 HTML 定位 规则 ;absolute 表示 采用 绝对 定位 ， 需 
要 同时 使 用 left、right、top 和 bottom 等 属性 进行 绝对 定位 。 而 其 层 闭 通过 z-index 属性 定义 ， 此 
时 对 象 不 具有 边 距 ， 但 仍 有 填充 和 边框 ; fixed 可 以 使 对 象 固定 在 一 个 位 置 ， 即 使 有 滚动 条 也 不 会 
改变 其 位 置 。relative 表示 采用 相对 定位 ， 对 象 不 可 层 登 ， 但 将 依据 left、right、top 和 bottom 等 
属性 设置 在 页 面 中 的 偏 移 位 置 。 

当 容 器 的 position 属性 值 为 fxed 时 ， 这 个 容器 即 被 固定 定位 了 。 固定 定位 和 绝对 定位 非常 类 
似 ， 不 过 被 定位 的 容器 不 会 随 着 滚动 条 的 拖 动 而 变化 位 置 。 在 视野 中 ， 固 定 定位 的 容器 的 位 置 是 
不 会 改变 的 。 下 面 举例 讲述 固定 定位 的 使 用 ， 其 代码 如 下 所 示 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3. org/TR/xhtml1l/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" 
/><title>CSS 固定 定位 </title> 
<style type="text/css"> 
*{margin: Opx; 
padding:0px;} 
#allf{ 
width:500px; 
height:550px; 
background-color:#cccOcc;} 
#fixed{ 
width:150px; 
height:80px; 
border:15px outset #f0ff00; 
background-color:#9c9000; 
position:fixed; 
top:20px; 
left:10px;} 
#af 
width:250px; 
height:300px; 
margin-left:20px; 
background-color:#ee00ee; 
border:2px outset #000000;} 
</style> 
</head> 
<body> 
<div id="all"> 
<div id="fixed"> 固 定 的 容器 </div> 
<div id="a"> 无 定位 的 div 容器 </div> 
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</div> 

</body> 

</html> 

在 本 例 中 给 外 部 DIV 设置 了 # ccc0cc 背景 色 ， 给 内 部 无 定位 的 DIV 设置 了 #ee00ee 背景 色 ， 
而 给 固定 定位 的 DIV 容器 设置 了 #9c9000 背景 色 ， 并 设置 了 outset 类 型 的 边框 。 在 浏览 器 中 浏览 
效果 如 图 9-5 和 图 9-6 所 示 。 
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图 9-5 固定 定位 效果 图 9-6 拖 动 浏览 器 后 的 效果 
2. float 属性 


应 用 Web 标准 创建 网 页 以 后 ，float 浮动 属性 是 元 素 定位 中 非常 重要 的 属性 ， 经 常 通过 对 
Div 元 素 应 用 float 浮动 进行 定位 ， 不 但 对 整个 版 式 进行 规划 ， 还 可 以 对 一 些 基 本 元 素 如 导航 等 
进行 排列 。 

语法 : 

float:none|lleft|right 


CSS 允许 任何 元 素 float 浮动 ,不 论 是 图 像 、 段 落 ， 还 是 列表 。 无 论 先 前 元 素 是 什么 状态 ， 浮 
动 后 都 成 为 块 级 元 素 。 浮 动 元 素 的 宽度 默认 为 auto。 

float 属性 不 是 你 所 想象 的 那么 简单 ， 不 是 通过 这 一 篇 文字 的 说 明 ， 就 能 让 你 完全 搞 明 白 它 的 
工作 原理 ， 需 要 在 实践 中 不 断 总 结 经 验 。 下 面 通过 例子 ， 来 说 明 它 的 工作 情况 。 

如 果 float 取 值 为 none 或 没有 设置 float 时 ,不 会 发 生 任何 浮动 ， 块 元 素 独占 一 行 ， 紧 随 其 后 
的 块 元 素 将 在 新 行 中 显示 。 其 代码 如 下 所 示 ， 在 浏览 器 中 的 效果 如 图 9-7 所 示 ， 可 以 看 到 由 于 没 
有 设置 DIV 的 float 属性 ， 因 此 每 个 DIV 都 单独 占 一 行 ， 两 个 DIV 分 两 行 显示 。 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 没 有 设置 float 时 </title> 
<style type="text/css"> 
#content a { 
width:250px; 
height:100px; 
border:2px solid #000f£00; 
margin:15px; 
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background:#0ccc00; 
1 
#content b { 
width:250px; 
height:100px; 
border:2px solid #000f£00; 
margin:15px; 
background:#ff£f0000; 
} 
</style> 
</head> 
<body> 
<div id="content a"> 这 是 第 一 个 DIV</div> 
<div id="content b"> 这 是 第 二 个 DIV</div> 
</body> 
</html> 
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9-7 没有 设置 float 


下 面 修改 一 下 代码 ， 使 用 float:left 对 content_a 应 用 向 左 的 浮动 ， 而 content_b 不 应 用 任何 浮 
动 。 其 代码 如 下 所 示 ， 在 浏览 器 中 的 浏览 效果 如 图 9-8 所 示 ， 可 以 看 到 对 content_a 应 用 向 左 的 浮 
动 后 ，content_a 向 左 浮动 ，content_b 在 水 平方 向 紧 跟 在 它 的 后 面 ， 两 个 DIV 占 一 行 ， 在 一 行 中 
并 列 显示 。 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 一 个 设置 为 左 浮动 ， 一 个 不 设置 浮动 </title> 
<style type="text/css"> 

#content a { 

width:250px; 

height:100px; 

float:left; 

border:2px solid #000f00; 

margin:15px; 

background:#0ccc00;} 

#content b { 

width:250px; 
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height:100px; 

border:2px solid #000f007 

margin:15px; 

background:#ff00007 

} 

</style> 

</head> 

<body> 

<div id="content a"> 这 是 第 一 个 DIV 向 左 浮动 </div> 
<div id="content _b"> 这 是 第 二 个 DIV 不 应 用 浮动 </div> 
</body> 

</html> 
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9-8 两 个 DIV 并 列 显示 


9.3 ”CSS+DIV 布局 的 常用 方法 


无 论 使 用 表格 还 是 CSS， 网 页 布局 都 是 把 大 块 的 内 容 放 进 网 页 的 不 同 区 域 里 面 。 有 了 CSS， 
最 常用 来 组 织 内 容 的 元 素 就 是 <div> 标 签 。CSS 排版 是 一 种 很 新 的 排版 理念 ， 首 先 要 将 页 面 使 用 
<div> 整 体 划 分 几 个 板块 ， 然 后 对 各 个 板块 进行 CSS 定位 ， 最 后 在 各 个 板块 中 添加 相应 的 内 容 。 


9.3.1 使 用 DIV 对 页 面 整 体 规划 
在 利用 CSS 布局 页 面 时 ， 首 先 要 有 一 个 整体 的 规划 ， 包 括 整个 页 面 分 成 哪些 模块 ， 各 个 模块 


之 间 的 父子 关系 等 。 以 最 简单 的 框架 为 例 ， 页 面 由 横幅 广告 (banner)、 主 体内 容 (content)、 菜 
单 导航 (links) 和 脚注 (footer) 几 个 部 分 组 成 ,各 个 部 分 分 别 用 自己 的 id 来 标识 ,如 图 9-9 所 示 。 
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图 9-9 页 面 内 容 框架 
其 页 面 中 的 HTML 框架 代码 如 下 所 示 。 


<div id="container">container 
<div id="banner">banner</div> 
<div id="content">content</div> 
<div id="links">links</div> 
<div id="footer">footer</div> 
</div> 
实例 中 每 个 板块 都 是 一 个 <div>， 这 里 直接 使 用 CSS 中 的 id 来 表示 各 个 板块 ， 页 面 的 所 有 
DIV 块 都 属于 container, 一 般 的 DIV 排版 都 会 在 最 外 面 加 上 这 个 父 DIV, 便于 对 页 面 的 整体 进行 
调整 。 对 于 每 个 DIV 块 ， 还 可 以 再 加 入 各 种 元 素 或 行内 元 素 。 


9.3.2 使 用 CSS 定位 


整理 好 页 面 的 框架 后 , 就 可 以 利用 CSS 对 各 个 板块 进行 定位 ,实现 对 页 面 的 整体 规划 ,然后 


再 往 各 个 板块 中 添加 内 容 。 
下 面 首先 对 body 标记 与 container 父 块 进行 设置 ， 其 CSS 代码 如 下 所 示 。 


body { 
margin:15px; 
text-align:center; 
} 
#container{ 
width:1000px; 
border:1lpx solid #000000; 
padding:10px; 
} 
上 面 代码 设置 了 页 面 的 边界 和 页 面 文本 的 对 齐 方式 ， 以 及 父 块 的 宽度 为 1000px。 下 面 来 设置 
banner 板块 ， 其 CSS 代码 如 下 所 示 。 


#banner{ 
margin-bottom: 5px; 
padding:20px; 
background-color:#aaaa0f; 
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border:1Px solid #000000; 
text-align:center; 


} 


这 里 设置 了 banner 板块 的 边界 、 填 充 和 背景 颜色 等 。 
下 面 利 用 float 方法 将 content 移动 到 左 侧 ，links 移动 到 页 面 右 人 出， 这 里 分 别 设置 了 这 两 个 板 
块 的 宽度 和 高 度 ， 读 者 可 以 根据 需要 调整 。 代 码 如 下 所 示 。 
#content{ 
float:left; 
width:670px; 
height:300px; 
background-color:#ca0a0f; 
border:1lpx solid #000000; 
text-align:center; 
J 
#1links{ 
float:right; 
width:300px; 
height:300px; 
background-color:yellow; 
border:1Px solid #000000; 
text-align:center; 
} 
由 于 content 和 links 对 象 都 设置 了 浮动 属性 ， 因 此 footer 需要 设置 clear 属性 ， 使 其 不 受 浮动 
的 影响 ， 代 码 如 下 所 示 。 
#footer{ 
clear:both;  /* 不 受 float 影响 */ 
padding:10px; 
border:lpx solid #000000; 
background-color:green; 
text-align:center; 
1 
这 样 页 面 的 整体 框架 便 搭建 好 了 ， 如 图 9-10 所 示 。 需 要 指出 的 是 ，content 块 中 不 能 放宽 度 
太 长 的 元 素 ， 如 很 长 的 图 片 或 不 折 行 的 英文 等 ， 否 则 links 将 再 次 被 挤 到 content 下 方 。 
后 期 维护 时 ,如 果 希 望 content 的 位 置 与 links 对 调 , 仅仅 只 需 将 content 和 links 属性 中 的 left 
和 right 改变 。 这 是 传统 的 排版 方式 所 不 可 能 实现 的 ， 也 正 是 CSS 排版 的 魅力 之 一 。 
另外 ,如 果 links 的 内 容 比 content 的 长 ,在 正 浏览 器 上 footer 就 会 贴 在 content 下 方 而 与 links 
出 现 寻 


旺 


全 
Do 
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图 9-10 搭建 好 的 页 面 布局 


9.3.3 设计 各 块 的 位 置 


当 页 面 的 内 容 已 经 确定 后 ， 则 需要 根据 内 容 本 身 考虑 整体 的 页 面 布 局 类 型 ， 例 如 是 单 栏 、 双 
栏 还 是 三 栏 等 ， 这 里 采用 的 布局 如 图 9-11 所 示 。 

由 图 9-11 可 以 看 出 , 在 页 面 外 部 有 一 个 整体 的 框架 container，banner 位 于 页 面 整体 框架 中 的 
最 上 方 ，content 与 links 位 于 页 面 的 中 部 ， 其 中 content 占据 着 页 面 的 绝 大 部 分 。 最 下 面 是 页 面 的 
脚注 footer。 


图 9-11 简单 的 页 面 框 如 
9.4 ”常见 的 布局 类 型 


以 前 常用 表格 来 布局 ， 而 现在 一 些 比较 知名 的 网 页 设计 全 部 采用 的 DIV+CSS 来 排版 布局 。 
DIV+CSS 的 好 处 可 以 使 HTML 代码 更 整齐 ， 更 容易 使 人 理解 ， 而 且 在 浏览 时 的 速度 也 比 传统 的 
布局 方式 快 ， 最 重要 的 是 它 的 可 控 性 要 比 表格 强 得 多 。 下 面 介 绍 常见 的 布局 类 型 。 


9.4.1 使 用 CSS 定位 单行 单列 固定 宽度 


单行 单列 固定 宽度 也 就 是 1 列 固定 宽度 布局 , 它 是 所 有 布局 的 基础 , 也 是 最 简单 的 布局 形式 。 
一 列 固定 宽度 中 ， 宽 度 的 属性 值 是 固定 像素 。 下 面 举 例 说 明 单 行 单列 固定 宽度 的 布局 方法 ， 具 体 
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步骤 如 下 。 
步 野 014 在 HTML 文档 的 <head> 与 </head> 之 问 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ,如 下 所 示 。 


<style> 

#Layer{ 
background-color:#00cc33; 
border:3px solid #ff3399; 
width:500px; 
height:350px; 

1 

</style> 


六 提示 女 


使 用 background-color:#00cc33 将 DIV 设置 为 绿色 背景 ， 并 使 用 border:3px solid #f3399 将 DIV 设置 
了 粉红 色 的 3px 宽度 的 边框 ， 使 用 width:500px 设置 宽度 为 500 像素 固定 宽度 ， 使 用 height:350px 设 
置 高 度 为 350 像素 。 


步骤 024 在 HTML 文档 的 <body> 与 <body> 之 间 的 正文 中 输入 以 下 代码 ， 给 DIV 使 用 了 layer 作 
为 id 名 称 。 
<div id="Layer">1 列 固定 宽度 </div> 


步骤 034 在 浏览 器 中 浏览 ， 由 于 是 固定 宽度 ， 无 论 怎 样 改变 浏览 器 窗口 大 小 ，DIV 的 宽度 都 不 
会 改变 ， 如 图 9-12 和 图 9-13 所 示 。 


Ce ono e P- ox Snes “上 ee Dr 2 PCX| Snasn 
2 Wal Ea ES TR We EE ETORCZI 


图 9-12 浏览 器 窗口 变 小 效果 图 9-13 浏览 器 窗口 变 大 效果 
克 提示 六 


页 面 居 中 是 常用 的 网 页 设计 表现 形式 之 一 , 传统 的 表格 式 布 局 中 , 用 align="center" 属 性 来 实现 表格 居 
中 显示 。DIV 本 身 也 支持 align="center" 属 性 ， 同 样 可 以 实现 居中 ， 但 是 Web 标准 化 时 代 ， 这 个 不 是 
我 们 想 要 的 结果 。 因 为 不 能 实现 表现 与 内 容 的 分 离 。 
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9.4.2 一 列 自 适 应 


自 适 应 布局 是 在 网 页 设计 中 常见 的 一 种 布局 形式 ， 自 适应 的 布局 能 够 根据 浏览 器 窗口 的 大 
小 ， 自 动 改变 其 宽度 或 高 度 值 ， 是 一 种 非常 灵活 的 布局 形式 ， 良 好 的 自 适应 布局 网 站 对 不 同 分 辨 
率 的 显示 器 都 能 提供 最 好 的 显示 效果 。 自 适应 布局 需要 将 宽度 由 固定 值 改 为 百分比 。 下 面 是 一 列 
自 适应 布局 的 CSS 代码 。 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>1 列 自 适应 </title> 
<style> 
#Layer{ 
background-color:#00cc33; 
border:3px solid #ff3399; 
width:60%; 
height:60%; 
| 
</style> 
</head> 
<body> 
<div id="Layer">1 列 自 适应 </div> 
</body> 
</html> 


这 里 将 宽度 和 高 度 值 都 设置 为 60%， 从 浏览 效果 中 可 以 看 到 ,DIV 的 宽度 已 经 变 为 了 浏览 器 
宽度 的 60% 的 值 ， 当 扩大 或 缩小 浏览 器 窗口 时 ， 其 宽度 和 高 度 还 将 维持 在 与 浏览 器 当前 宽度 比例 
0 国人 玉 和 国生 5 其 下 


图 9-14 窗口 变 小 图 9-15 窗口 变 大 


9.4.3 ”两 列 固 定 宽度 


有 了 一 列 固定 宽度 作为 基础 ,两 列 固定 宽度 就 非常 简单 , 我们 知道 DIV 用 于 对 某 一 个 区 域 的 
标识 ， 而 两 列 的 布局 ， 自 然 需 要 用 到 两 个 DIV。 
两 列 固定 宽度 非常 简单 ， 两 列 的 布局 需要 用 到 两 个 DIV， 分 别 把 两 个 DIV 的 id 设置 为 left 
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与 right， 表 示 两 个 DIV 的 名 称 。 首 先 为 它们 设置 宽度 ， 然 后 让 两 个 DIV 在 水 平 线 中 并 排 显示 ， 
从 而 形成 两 列 式 布局 ， 有 具体 步骤 如 下 。 


步骤 014 在 HTML 文档 的 <head> 与 </head> 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ,如 下 所 示 。 


<style> 

#1left{ 
background-color:#00cc33; 
border:1Px solid #ff3399; 
width:250px; 
height:250px; 
float:left; 
1 

#right{ 
background-color:#ffcc33; 
border:1lpx solid #ff3399; 
width:250px; 
height:250px; 
float:left; 

} 

</style> 


友 提示 友 


left 与 right 两 个 DIV 的 代码 与 前 面 类 似 ， 两 个 DIV 使 用 相同 宽度 实现 两 列 式 布局 。float 属性 是 CSS 
布局 中 非常 重要 的 属性 ， 用 于 控制 对 象 的 浮动 布局 方式 ， 大 部 分 DIV 布局 基本 上 都 通过 float 的 控制 
来 实现 的 。float 使 用 none 值 时 表示 对 象 不 浮动 ， 而 使 用 left 时 ， 对 象 将 向 左 浮动 , 例如 本 例 中 的 DIV 
使 用 了 float:left; 之 后 ，DIV 对 象 将 向 左 浮动 。 


步骤 024 然后 在 HTML 文档 的 <body> 与 <body> 之 间 的 正文 中 输入 以 下 代码 , 给 DIV 使 用 left 和 
right 作为 id 名 称 。 
<div id="left"> 左 列 </div> 
<div id="right"> 右 列 </div> 
步 双 034 在 使 用 了 简单 的 float 属性 之 后 ,两 列 固定 宽度 能 够 完整 地 显示 出 来 。 在 浏览 器 中 浏览， 
如 图 9-16 所 示 就 是 两 列 固定 宽度 布局 。 


图 9-16 ”两 列 固定 宽度 布局 
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9.4.4 两 列 宽度 自 适应 


下 面 使 用 两 列 宽度 自 适应 性 ， 来 实现 左右 栏 宽 度 能 够 做 到 自动 适应 ， 设 置 自 适 应 主要 通过 宽 
度 的 百分比 值 设置 。CSS 代码 修改 如 下 。 


<style> 

#1left{ 
background-color:#00cc33; 
border:1lpx solid #ff3399; 
width:60%; 
height:250px; 
float:left; 

} 

#right{ 
background-color:#ffcc33; 
border:lpx solid #ff3399; 
width:30%; 
height:250px; 
float:left; 

L 

</style> 


这 里 主要 修改 了 左 栏 宽度 为 60%, 右 栏 宽度 为 30% 。 在 浏览 器 中 浏览 效果 如 图 9-17 和 图 9-18 
所 示 ， 无 论 怎样 改变 浏览 器 窗口 大 小 ， 左 右 两 栏 的 宽度 与 浏览 器 窗口 的 百分比 都 不 改变 。 
> Eel 


下 A mes £ 中 -cx| 3 mmxmac -me 
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图 9-17 浏览 器 窗口 变 小 效果 图 9-18 浏览 器 窗口 变 大 效果 
9.4.5 ”三 列 浮动 中 间 宽 度 自 适应 


使 用 浮动 定位 方式 ， 从 一 列 到 多 列 的 固定 宽度 和 自 适应 ， 基 本 上 可 以 简单 完成 ， 包 括 三 列 的 
固定 宽度 。 而 在 这 里 给 我 们 提出 了 一 个 新 的 要 求 ， 希 望 有 一 个 三 列 式 布局 ， 其 中 左 栏 要 求 固定 宽 
度 并 居 左 显示 ， 右 栏 要 求 固定 宽度 并 居 右 显示 ， 而 中 间 栏 需要 在 左 栏 和 右 栏 的 中 间 ， 根 据 左右 栏 
的 间距 变化 自动 适应 。 

在 开始 这 样 的 三 列 布局 之 前 ， 有 必要 了 解 一 个 新 的 定位 方式 一 一 绝对 定位 。 前 面 的 浮动 定位 
方式 主要 由 浏览 器 根据 对 象 的 内 容 自 动 进行 浮动 方向 的 调整 ,但 是 这 种 方式 不 能 满足 定位 需求 时 ， 
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就 需要 新 的 方法 来 实现 。CSS 提供 的 除 浮动 定位 之 外 的 另 一 种 定位 方式 就 是 绝对 定位 ， 绝 对 定位 
使 用 position 属性 来 实现 。 
下 面 讲述 三 列 浮 动 中 间 宽 度 自 适应 布局 的 创建 ， 具 体操 作 步 骤 如 下 。 


步骤 01 在 HTML 文档 的 <head> 与 </head> 之 问 相应 的 位 置 输入 定义 的 CSS 样式 代码 ,如 下 所 示 。 


<style> 

body{ 
margin:0px; 

} 

#1left{ 
background-color:#00cc00; 
border:2px solid #333333; 
width:100px; 
height:250px; 
position:absolute; 
top :0PX7 
left:0Px7 

} 

#center{ 
background-color:#ccffcc; 
border:2px solid #333333; 
height:250px; 
margin-left:100px; 
margin-right:100px; 

} 

#right{ 
background-color:#00cc00; 
border:2px solid #333333; 
width:100px; 
height:250px; 
position:absolute; 
right:0Opx; 
top: Opx; 

} 

</style> 


步 野 024 在 HTML 文档 的 <body> 与 <body> 之 间 的 正文 中 输入 以 下 代码 ， 给 DIV 使 用 left、right 
和 center 作为 id 名称。 


<div id="left"> 左 列 </div> 
<div id="center"> 中 间 列 </div> 
<div id="right"> 右 列 </div> 


步骤 034 在 浏览 器 中 浏览 ， 其 效果 如 图 9-19 和 图 9-20 所 示 。 
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图 9-19 中 间 宽 度 自 适 应 图 9-20 ”中间 宽 度 自 适应 
如 图 9-21 所 示 的 网 页 采用 三 列 浮动 中 间 宽 度 自 适应 布局 。 


nb’ 1s here for a few reascns to cisply mycortolo 如 
oviee spointorcontaclwth poyenia ctionts, and lo wap me 
forn hng too much free tme. Hlove epenmenirgwinand 
iD mm wcrse, rd willpmbsblahrayrs eh is 


nove 和 show, and ket me Hr ow wharyou Pink akout my 


图 9-21 三 列 浮动 中 间 宽 度 自 适应 布局 
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本 章 导读 


动态 网 页 技术 的 出 现 ， 使 得 网 站 从 展示 平台 变 成 了 网 络 交互 平台 。Dreamweaver 的 可 视 化 
工具 可 以 开发 动态 站 点 ， 而 不 必 编 写 复 杂 的 代码 。 动 态 网 页 以 数据 库 技术 为 基础 ， 可 以 大 大 降 
低 网 站 维护 的 工作 量 。 本 章 主 要 学 习 动 态 网 页 平台 的 搭建 、 数 据 库 连 接 的 创建 、 编 辑 数据 表 记 
录 、 添 加 服务 器 行为 。 


技术 要 点 


熟悉 动态 网 页 的 特点 与 制作 过 程 
了 解 搭建 本 地 服务 器 
掌握 创建 数据 库 连 接 
掌握 编辑 数据 表 记录 
掌握 添加 服务 器 行为 


10.1 动态 网 页 的 特点 与 制作 过 程 


数据 库 是 创建 动态 网 页 的 基础 。 对 于 网 站 来 说 一 般 都 要 准备 一 个 用 于 存储 、 管 理 和 获取 客户 
信息 的 数据 库 。 利 用 数据 库 制作 的 网 站 ， 一 方面 ， 在 前 台 访问 者 可 以 利用 查询 功能 很 快 地 找到 自 
己 需要 的 资料 ， 另 一 方面 ， 网 站 管理 者 通过 后 台 管理 系统 很 方便 地 管理 网 站 ， 而 且 后 台 管理 系统 
界面 很 直观 ， 即 使 不 懂 计 算 机 的 人 也 很 容易 学 会 使 用 。 


10.1.1 动态 网 页 特点 


动态 网 页 是 与 静态 网 页 相对 应 的 ， 也 就 是 说 ， 网 页 URL 的 后 绥 不 是 .htm、.html、.shtml、.xml 
等 静态 网 页 的 常见 形式 ， 而 是 以 .asp、:jsp、.php、.perl、.cgi 等 形式 为 后 级 ， 并 且 在 动态 网 页 网 址 
中 有 一 个 标志 性 的 符号 一 一 “? ”。 

这 里 说 的 动态 网 页 ， 与 网 页 上 的 各 种 动画 、 滚 动 字幕 等 视觉 上 的 “动态 效果 ”没有 直接 关系 ， 
动态 网 页 也 可 以 是 纯 文 字 内 容 的 ， 也 可 以 是 包含 各 种 动画 的 内 容 ， 这 些 只 是 网 页 具体 内 容 的 表现 
形式 。 无 论 网 页 是 否 具有 动态 效果 ， 采 用 动态 网 站 技术 生成 的 网 页 都 称 为 动态 网 页 。 

从 网 站 浏览 者 的 角度 来 看 , 无 论 是 动态 网 页 还 是 静态 网 页 , 都 可 以 展示 基本 的 文字 和 图 片 信息 ， 
但 从 网 站 开发 、 管 理 、 维 护 的 角度 来 看 就 有 很 大 的 差别 。 将 动态 网 页 的 一 般 特点 简要 归纳 如 下 : 
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(1) 动态 网 页 以 数据 库 技术 为 基础 ， 可 以 大 大 降低 网 站 维护 的 工作 量 。 

(2) 采用 动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 ， 如 用 户 注册 、 用 户 登 录 、 在 线 调 查 、 用 
户 管理 、 订 单 管 理 等 。 

(3) 动态 网 页 实际 上 并 不 是 独立 存在 于 服务 器 上 的 网 页 文件 ， 只 有 当 用 户 请 求 时 服务 器 才 返 
回 一 个 完整 的 网 页 。 

(4) 动态 网 页 中 的 “? ”对 搜索 引擎 检索 存在 一 定 的 问题 ， 搜 索引 擎 一 般 不 可 能 从 一 个 网 站 
的 数据 库 中 访问 全 部 网 页 ， 或 者 出 于 技术 方面 的 考虑 ， 搜 索引 擎 不 去 抓 取 网 址 中 “? ”后 面 的 内 
容 。 因 此 ， 采 用 动态 网 页 的 网 站 在 进行 搜索 引擎 推广 时 ， 需 要 做 一 定 的 技术 处 理 才 能 适应 搜索 引 
擎 的 要 求 。 


10.1.2 动态 网 页 工作 原理 


动态 网 页 技术 的 工作 原理 是 : 使 用 不 同 技术 编写 的 动态 页 面 保存 在 Web 服务 器 内 ， 当 客户 端 
用 户 向 Web 服务 器 发 出 访问 动态 页 面 的 请 求 时 , Web 服务 器 将 根据 用 户 所 访问 页 面 的 后 级 名 确定 
该 页 面 使 用 的 网 络 编程 技术 ， 然 后 把 该 页 面 提交 给 相应 的 解释 引擎 ， 解 释 引 擎 扫描 整个 页 面 找 到 
特定 的 定 界 符 ， 并 执行 位 于 定 界 符 内 的 脚本 代码 以 实现 不 同 的 功能 ， 如 访问 数据 库 、 发 送 电子 邮 
件 、 执 行 算术 或 逻辑 运算 等 ,最 后 把 执行 结果 返回 Web 服务 器 ; 最 终 ，Web 服务 器 把 解释 引擎 的 
执行 结果 连同 页 面 上 的 HTML 内 容 以 及 各 种 客户 端 脚本 一 同 传送 到 客户 端 。 如 图 10-1 所 示 就 是 
动态 网 页 的 工作 原理 图 。 


应 用 服务 器 
客户 认证 
权限 管理 


系统 日 志 
系统 监控 
任务 管理 
与 其 他 网 络 数据 交换 


其 他 网 络 系统 


Web 服务 器 
WWW 服务 


Servlet 


图 10-1 动态 网 页 的 工作 原理 图 
10.1.3 ”动态 网 站 技术 核心 


动态 网 站 的 工作 方式 其 实 很 简单 。 那 么 是 不 是 动态 网 页 学 习 和 开发 就 轻松 了 呢 ? 显然 不 是 这 
样 的 。 要 使 动态 网 站 动 起 来 ， 其 中 会 需要 多 种 技术 进行 支撑 。 简 单 概括 就 是 : 数据 传输 、 数 据 存 
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储 和 服务 管理 。 
1. 数据 传输 


有 的 读者 可 能 会 想到 ，HTTP 不 是 专门 负责 数据 传输 的 吗 ? 是 的 。 不 过 ，HTTP 仅 是 一 个 应 
用 层 的 自然 协议 。 如 何 获取 HTTP 请 求 消息 ?还 必须 使 用 一 种 技术 来 实现 。 

可 以 选用 一 种 编程 语言 (如 C 语言 、Java 语言 等 ) 来 设置 和 接收 HTTP 请 求 和 响应 消息 的 构 
成 ， 但 是 这 种 过 程 非常 费时 、 费 力 ， 并 且 容 易 出 错 ， 对 于 广大 初学 者 来 说 简直 就 是 望尘莫及 。 

如 果 能 够 提供 现成 的 技术 ， 封 装 对 HTTP 请 求 和 响应 消息 的 控制 ， 岂 不 是 简化 了 开发 ， 降 低 

学 习 的 门槛 。 而 服务 器 技术 的 一 个 核心 功能 就 是 负责 对 HTTP 请 求 和 响应 消息 的 控制 。 例 如 ， 在 
ASP 中 ， 我 们 直接 调用 Request 和 Response 这 两 个 对 象 ， 然 后 利用 它们 包含 的 属性 和 方法 就 可 以 
完成 HTTP 请 求 和 响应 的 控制 。 在 其 他 服务 器 技术 中 ， 也 都 提供 这 些 基 本 功能 ， 但 是 所 使 用 的 对 
象 和 方法 可 能 略 有 不 同 。 


2. 数据 存储 


数据 传输 是 动态 网 站 的 基础 ， 但 是 如 何 存储 数据 也 是 动态 网 站 必须 解决 的 核心 技术 之 一 。 也 
许 你 可 能 想到 利用 HTTP 协议 实现 在 不 同 页 面 之 间 传 输 信息 ， 但 是 这 只 是 解决 了 信息 传输 的 基本 
途径 ， 并 不 是 最 佳 方式 。 试 想 ， 在 会 员 管理 网 站 中 ， 为 了 保证 每 一 位 登录 会 员 都 能 够 通过 每 个 页 
面 的 验证 ， 我 们 可 能 需要 在 HTTP 中 不 断 附 加 每 位 登录 会 员 的 信息 ， 这 本 身 就 是 一 件 很 麻烦 的 事 
情 。 如 果 登 录 会 员 很 多 ， 无 疑 会 增加 HTTP 传输 的 负担 ， 甚 至 造成 网 络 的 堵塞 ， 更 为 重要 的 是 这 
很 容易 造成 整个 网 络 传输 的 混乱 。 

显然 ， 如 果 使 用 HTTP 来 完成 所 有 信息 的 共享 和 传输 问题 是 很 不 现实 的 ， 也 是 行 不 通 的 。 最 
理想 的 方法 是 服务 器 能 够 提供 一 种 技术 来 存储 不 同类 型 的 数据 。 例 如 ， 根 据 信息 的 应 用 范围 可 以 
分 为 : 应 用 程序 级 变量 (存储 的 信息 为 所 有 人 共享 ) 和 会 话 级 变量 (存储 的 信息 仅 为 某 个 用 户 使 
用 )。 一 般 服 务 器 技术 都 能 够 提供 服务 器 内 存 管理 , 在 服务 器 内 存 中 划分 出 不 同 区 域 , 专门 负责 存 
储 不 同类 型 的 变量 ， 以 实现 数据 的 共享 和 传递 。 另 外， 一 般 服 务 器 技术 都 会 提供 Cookie 技术 ， 以 
便 把 用 户 信息 保存 到 用 户 本 地 的 计算 机 中 ， 使 用 时 随时 从 客户 端 调 出 来 ， 从 而 实现 信息 的 长 久保 
存 和 再 利用 。 


3， 服 务 管理 


如 果 说 解决 了 动态 网 站 的 数据 传输 和 存储 这 两 个 基本 问题 ， 动 态 网 站 的 条 件 基本 成 立 了 。 但 
是 要 希望 动态 网 站 能 够 正常 的 运行 ， 还 需要 一 套 技术 来 维持 这 种 运行 状态 。 这 套 技术 就 是 服务 器 
管理 ， 实 际 上 也 是 服务 器 技术 中 最 复杂 的 功能 。 

当然 ， 我 们 这 里 所 说 的 服务 器 管理 仅仅 是 狭义 的 管理 概念 ， 它 仅 包 括 服务 器 参数 设置 ， 动 态 网 
站 环境 设置 ， 以 及 网 站 内 不 同 功能 模块 之 间 的 协同 管理 。 例 如 ， 网 站 物理 路 径 和 相对 路 径 的 管理 、 
服务 器 安全 管理 、 网 站 默认 值 管理 、 扩 展 功能 管理 和 辅助 功能 管理 ， 以 及 一 些 管理 工具 支持 等 。 

你 可 以 想象 一 下 ， 如 果 没 有 服务 器 管理 技术 的 支持 ， 整 个 服务 器 可 能 只 能 运行 一 个 网 站 (或 
一 个 Web 应 用 程序 )， 动 态 网 页 也 无 法 准确 定位 自己 的 位 置 。 整 个 网 站 处 于 一 片 混乱 、 混 沌 状态 。 
例如 ， 在 ASP 服务 器 技术 中 ， 我们 可 以 利用 Server 对 象 来 管理 各 种 功能 ， 如 网 页 定位 、 环 境 参数 
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设置 、 安 装 扩展 插件 等 。 
10.2 ”动态 网 站 技术 类 型 


实际 上 目前 常用 的 三 类 服务 器 技术 就 是 ASP (Active Server Pages， 动 态 服 务 器 网 页 )、JSP 
(JavaServer Pages，Java 服务 器 网 页 )、PHP (Hypertext Preprocessor， 超 文本 预 处 理 程序 )。 这 些 
技术 的 核心 功能 都 是 相同 的 ， 但 是 它们 基于 的 开发 语言 不 同 ， 实 现 功能 的 途径 也 存在 差异 。 如 果 
当 你 掌握 了 一 种 服务 器 技术 ， 再 学 习 另 一 种 服务 器 技术 ， 就 会 发 现 简单 多 了 。 这 些 服务 器 技术 都 
可 以 设计 出 常用 动态 网 页 功能 ， 对 于 一 些 特殊 功能 ， 虽 然 不 同 服务 器 技术 支持 程度 不 同 ， 操 作 的 
难 易 程 度 也 略 有 差别 ， 甚 至 还 有 些 功 能 必须 借助 各 种 外 部 扩展 才 可 以 实现 。 


10.2.1 ASP 


ASP 是 微软 公司 开发 的 代替 CGI 脚本 程序 的 一 种 应 用 ， 它 可 以 与 数据 库 和 其 他 程序 进行 交 
互 ， 是 一 种 简单 、 方 便 的 编程 工具 。ASP 的 网 页 文件 的 格式 是 .asp， 现 在 常用 于 各 种 动态 网 站 中 。 
ASP 是 一 种 服务 器 端 脚本 编写 环境 ， 可 以 用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。ASP 采用 
VB Script 和 JavaScript 脚本 语言 作为 开发 语言 ， 当 然 也 可 以 嵌入 其 他 脚本 语言 。ASP 服务 器 技术 
只 能 在 Windows 系统 中 使 用 。 

ASP 网 页 具有 以 下 特点 : 


(1) 利用 ASP 可 以 实现 突破 静态 网 页 的 一 些 功能 限制 ， 实 现 动态 网 页 技术 。 

(2) ASP 文件 是 包含 在 HTML 代码 所 组 成 的 文件 中 的 ， 易 于 修改 和 测试 。 

(3) 服务 器 上 的 ASP 解释 程序 会 在 服务 器 端 执行 ASP 程序 ， 并 将 结果 以 HTML 格式 传送 到 
客户 端 浏览 器 上 ， 因 此 使 用 各 种 浏览 器 都 可 以 正常 浏览 ASP 所 产生 的 网 页 。 

(4) ASP 提供 了 一 些 内 置 对 象 ， 使 用 这 些 对 象 可 以 使 服务 器 端 脚本 功能 更 强 。 例 如 可 以 从 
Web 浏览 器 中 获取 用 户 通过 HTML 表单 提交 的 信息 ， 并 在 脚本 中 对 这 些 信息 进行 处 理 ， 然 后 向 
Web 浏览 器 发 送信 息 。 

(5) ASP 可 以 使 用 服务 器 端 ActiveX 组 件 来 执行 各 种 各 样 的 任务 ， 例 如 存 取 数 据 库 、 发 送 
E-mail 或 访问 文件 系统 等 。 

(6) 由 于 服务 器 是 将 ASP 程序 执行 的 结果 以 HTML 格式 传 回 客户 端 浏览 器 ， 因 此 使 用 者 不 
会 看 到 ASP 所 编写 的 原始 程序 代码 ， 可 防止 ASP 程序 代码 被 窃取 。 

(7) 方便 连接 Access 与 SQL 数据 库 。 

(8) 开发 需要 有 丰富 的 经 验 ， 和 否则 会 出 现 漏洞 ， 让 黑客 趁 虚 而 入 。 


0 2 忆 肖 已 同 尼 


PHP 也 是 一 种 比较 流行 的 服务 器 技术 ， 它 最 大 的 优势 就 是 开放 性 和 免费 服务 。 你 不 用 花费 一 
分 钱 ， 就 可 以 从 PHP 官方 站 点 (http://www.php.net) 下载 PHP 服务 软件 ， 并 不 受 限 制 地 获得 源 代 
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码 ， 甚 至 可 以 从 中 加 进 自己 的 功能 。PHP 服务 器 技术 能 够 兼容 不 同 的 操作 系统 。PHP 页 面 的 扩展 
名 为 .php。 
PHP 有 以 下 特性 : 


(1) 开放 的 源 代码 : 所 有 的 PHP 源 代码 都 能 够 找到 。 

(2) PHP 是 免费 的 : 和 其 他 技术 相 比 ，PHP 本 身 免 费 且 是 开源 代码 。 

(3) PHP 的 快捷 性 : 程序 开发 快 、 运 行 快 、 技 术 本 身 学 习 快 。 因 为 PHP 可 以 被 嵌入 于 HTML 
语言 ， 它 相对 于 其 他 语言 。 编 辑 简单 、 实 用 性 强 ， 更 适合 初学 者 。 

(4) 跨 平台 性 强 : 由 于 PHP 是 运行 在 服务 器 端的 脚本 ， 可 以 运行 在 Unix、Linux、Windows 下 。 

(5) 效率 高 : PHP 消耗 相当 少 的 系统 资源 。 

(6) 图 像 处 理 : 用 PHP 动态 创建 图 像 。 

(7) 面向 对 象 : 在 PHP4、PHP5 中 ， 面 向 对 象 方面 都 有 了 很 大 的 改进 ， 现 在 PHP 完全 可 以 


用 来 开发 大 型 商业 程序 。 
(8) 专业 专注 : PHP 支持 脚本 语言 为 主 ， 同 为 类 C 语言 。 
10:2539 SB 


JSP 是 Sun 公司 公司 倡导 、 许 多 公司 参与 一 起 建立 的 一 种 动态 网 页 技术 标准 。JSP 可 以 在 
Serverlet 和 JavaBean 技术 的 支持 下 ， 完 成 功能 强大 的 Web 应 用 开发 。 另 外 ，JSP 也 是 一 种 跨 多 个 
平台 的 服务 器 技术 ， 几 乎 可 以 执行 于 所 有 平台 。 

JSP 技术 是 用 Java 语言 作为 脚本 语言 的 ,JSP 网 页 为 整个 服务 器 端的 Java 库 单元 提供 了 一 个 
接口 来 服务 于 HTTP 的 应 用 程序 。 

在 传统 的 网 页 HTML 文件 〈*.htm.,*.html) 中 加 入 Java 程序 片段 和 JSP 标记 (tag)， 就 构成 
了 JSP 网 页 (*jsp)。Web 服务 器 在 遇 到 访问 JSP 网 页 的 请 求 时 ， 首 先 执 行 其 中 的 程序 片段 ， 然 后 
将 执行 结果 以 HTML 格式 返回 给 客户 。 程 序 片 段 可 以 操作 数据 库 、 重 新 定向 网 页 以 及 发 送 E-mail 
等 ， 这 就 是 建立 动态 网 站 所 需要 的 功能 。 

JSP 的 优点 如 下 : 


(1) 对 于 用 户 界面 的 更 新 ， 其 实 就 是 由 Web Server 进行 的 ， 所 以 给 人 的 感觉 更 新 很 快 。 
(2) 所 有 的 应 用 都 是 基于 服务 器 的 ， 所 以 它们 可 以 时 刻 保 持 最 新 版 本 。 
(3) 客户 端的 接口 不 是 很 繁琐 ， 对 于 各 种 应 用 易于 部 署 、 维 护 和 修改 。 


10.2.4 ASP、PHP 和 JSP 比较 


ASP、PHP 和 JSP 这 三 大 服务 器 技术 具有 很 多 共同 的 特点 : 

(1) 都 是 在 HTML 源 代码 中 混合 其 他 脚本 语言 或 程序 代码 。 其 中 ，HTML 源 代码 主要 负责 
描述 信息 的 显示 结构 和 样式 ， 而 脚本 语言 或 程序 代码 则 通常 用 于 向 机 器 发 出 一 系列 复杂 的 指令 。 

(2) 程序 代码 都 是 在 服务 器 端 经 过 专门 的 语言 引擎 解释 执行 之 后 ， 然 后 把 执行 结果 嵌入 到 
HTML 文档 中 ， 最 后 一 起 发 送 给 客户 端 浏览 器 。 
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(3) ASP、PHP 和 JSP 都 是 面向 Web 服务 器 的 技术 ， 客 户 端 浏览 器 不 需要 任何 附加 的 软件 支持 。 

当然 ， 它 们 也 存在 很 多 不 同 ， 例 如 : 

(1) JSP 代码 被 编译 成 Servlet， 并 由 Java 虚拟 机 解释 执行 ， 这 种 编译 操作 仅 在 对 JSP 页 面 的 
第 一 次 请 求 时 发 生 ， 以 后 就 不 再 需要 编译 。 而 ASP 和 PHP 每 次 请 求 都 需要 进行 编译 。 因 此 ， 从 
执行 速度 上 来 说 ，JSP 的 效率 当然 最 高 。 

(2) 目前 国内 的 PHP 和 ASP 应 用 最 为 广泛 。 由 于 JSP 是 一 种 较 新 的 技术 ， 国 内 使 用 较 少 。 
在 国外 ，JSP 已 经 是 比较 流行 的 一 种 技术 ， 尤 其 电子 商务 类 网 站 多 采用 JSP。 

(3) 由 于 免费 的 PHP 缺乏 规模 支持 ， 使 得 它 不 适合 应 用 于 大 型 电子 商务 站 点 ， 而 更 适合 一 些 
小 型 商业 站 点 ,ASP 和 JSP 则 没有 PHP 的 这 个 缺陷 .ASP 可 以 通过 微软 的 COM 技术 获得 ActiveX 
扩展 支持 , JSP 可 以 通过 Java Class 和 EJB 获得 扩展 支持 。 同 时 , 升级 后 的 ASPNET 更 是 获得 .NET 
类 库 的 强大 支持 ， 编 译 方式 也 采用 了 JSP 的 模式 ， 功 能 可 以 与 JSP 相 抗衡 。 


总 之 ，ASP、PHP 和 JSP 三 者 都 有 自己 的 用 户 群 ， 它 们 各 有 所 长 ， 读 者 可 以 根据 三 者 的 特点 
选择 一 种 适合 自己 的 语言 。 


10.3 ”搭建 本 地 服务 器 


要 建立 具有 动态 的 Web 应 用 程序 ， 必 有 需 建 立 一 个 Web 服务 器 ， 选 择 一 门 Web 应 用 程序 开发 
语言 ， 还 需要 选择 一 款 数据 库 管理 软件 。 同 时 ， 因 为 是 在 Dreamweaver 中 开发 的 ， 还 需要 建立 一 
个 Dreamweaver 站 点 ， 该 站 点 能 够 随时 调试 动态 页 面 。 因 此 创建 一 个 这 样 的 动态 站 点 ， 需 要 Web 
服务 器 +Web 开发 程序 语言 + 数据 库 管理 软件 +Dreamweaver 动态 站 点 。 


10.3.1 安装 1IS 


IIS (Intermet Information Server， 互 联网 信息 服务 ) 是 一 种 Web 服务 组 件 ， 它 提供 的 服务 包 
括 Web 服务 器 、FTP 服务 器 、NNTP 服务 器 和 SMTP 服务 器 ， 这 些 服 务 分 别 用 于 网 页 浏览 、 文 件 
传输 、 新 闻 服 务 和 邮件 发 送 等 方面 。 使 用 这 个 组 件 提 供 的 功能 ， 使 得 在 网 络 〈 包 括 互联 网 和 局 域 
网 ) 上 发 布 信息 成 了 一 件 很 简单 的 事情 。 
安装 IIS 的 具体 操作 步骤 如 下 。 
步 又 014 在 Windows 7 系统 下 ， 执 行 “ 开 始 ”|“ 控 制 面板 ”|“ 程 序 ”命令 ， 弹 出 如 图 10-2 所 示 
的 页 面 。 
步骤 024 弹出 “Windows 功能 ”对 话 框 ， 可 以 看 到 有 些 事 需要 手动 选择 的 ， 勾 选 需 要 安装 的 功 
能 复 选 框 ， 如 图 10-3 所 示 。 


215 


( s IT 


216 


打开 或 关闭 Windows 功能 a 
| Sane Snes se4Hue. HAas 
下 


忆 国 有 FP 
忆 面 月 web ST 


国耻 
| 名 名 Mieroscht NET Framework 3S1 


默认 程序 
| 人 人 用 攻 富生 条文 关于 宇 吕 后 丰 


昌国 此 Microrch Mecrege Queve (MSMQ 有 可 
同上 mp ei 

区 | STR BI Tabiet pc et 

hsERr Ts | EMRESNTa STR EH Wrdows Hbe:sE)TE 可 上 Tenst 5 可 

ee 可 县 Tonet Er 

冯 DER 用 民生 于 Bl TFT Sr = 


图 10-2 ”打开 或 关闭 Windows 功能 图 10-3 “Windows 功能 ”对 话 框 
步骤 034 单 击 “ 确 定 ”按钮 ， 弹 出 如 图 10-4 所 示 的 Microsoft Windows 对 话 框 。 
步骤 044 安装 完成 后 ， 再 次 进入 “控制 面板 ”， 选 择 “ 管 理工 具 ”， 双 击 “Internet 信息 服务 (IIS) 
管理 器 ”选项 ， 进 入 IIS 设置， 如 图 10-5 所 示 。 


Microsoft Windows 


Windows 正在 更 改 功能 ,请 身 候 。 这 可 能 需 
要 几 分 钟 。 


村 om rw 


LL Em 和 
mermet SRI e010 626 0 0 
= = am 


图 10-4 正在 更 改 功 能 图 10-5 “管理 工具 ”窗口 
步骤 054 选择 Default Web Site， 并 双击 ASP 的 选项 ， 如 图 10-6 所 示 。 


a | 
ER 
@ Defauit web ste # 责 ey 


= -Mr ne | see 


图 10-6 ”双击 ASP 选项 
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步骤 06M IIS7 中 ASP 父 路 径 是 没有 启用 的 ， 要 选择 True， 即 可 开启 父 路 径 ， 如 图 10-7 所 示 。 


图 10-7 开启 父 路 径 


步 又 07 4 单 击 右 侧 的 “高 级 设置 ” 超 链接 ， 弹 出 “高 级 设置 ”对 话 框 ， 设 置 “ 物 理 路 径 ”， 如 
图 10-8 所 示 。 


图 10-8 设置 “物理 路 径 ” 


步 又 08 4 单 击 “ 编 辑 网 站 ”下 面 的 “编辑 ”按钮 ， 弹 出 “网 站 绑 定 ”对 话 框 ， 单 击 右 侧 的 “ 编 
辑 ” 按 钮 ， 设 置 网 站 的 端口 ， 如 图 10-9 所 示 。 


eR 
OD 


10-9 “网 站 绑 定 ”对 话 框 
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10.3.2 配置 Web 服务 器 


步 又 01 4 单 击 “Intermet 信息 服务 (IIS ) 管理 器 ”对 话 框 中 的 “默认 文档 ”按钮 ， 如 图 10-10 所 示 。 
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图 10-10 单 击 “ 默 认 文档 ”按钮 
步骤 024 在 打开 的 页 面 中 单 击 右 侧 的 “添加 ” 超 链接 ， 如 图 10-11 所 示 。 
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图 10-11 单 击 右 侧 的 “添加 ” 超 链 接 
步骤 034 弹出 “添加 默认 文档 ”对 话 框 ， 在 “名 称 ” 文 本 框 中 输入 名 称 ， 单 击 “ 确 定 ”按钮 即 
可 ， 如 图 10-12 所 示 。 


10-12 “添加 默认 文档 ”对 话 框 
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10.4 ”创建 数据 库 连 接 


动态 页 面 最 主要 的 就 是 结合 后 台数 据 库 ， 自 动 更 新 网 页 ， 所 以 离开 数据 库 的 网 页 也 就 谈 不 上 
什么 动态 页 面 。 任 何 内 容 的 添加 、 删 除 、 修 改 、 检 索 都 是 建立 在 连接 基础 上 进行 的 ， 可 以 想象 连 
接 的 重要 性 了 。 

要 在 ASP 中 使 用 ADO 对 象 来 操作 数据 库 ， 首 先 要 创建 一 个 指向 该 数据 库 的 ODBC 连接 。 在 
Windows 系统 中 , ODBC 的 连接 主要 通过 ODBC 数据 源 管理 器 来 完成 。 下 面 就 以 Windows 7 为 例 
讲述 ODBC 数据 源 的 创建 过 程 ， 具 体操 作 步 骤 如 下 。 


步骤 014 执行 “控制 面板 ”| “系统 和 安全 ”| “管理 工具 ”| “数据 源 (ODBC ) ” 命令， 弹出 “ODBC 
数据 源 管理 器 ”对 话 框 ， 在 对 话 框 中 切换 到 “系统 DSN” 选 项 卡 ， 如 图 10-13 所 示 。 
步 又 024 单 击 “ 添 加 ”按钮 ， 弹 出 “创建 新 数据 源 ” 对 话 框 ， 选 择 如 图 10-14 所 示 的 设置 后 ， 单 
击 “ 完 成 ”按钮 。 
本 0D8C 下 所 剖 作 器 op | CT | 
[er wr |e rs [Me RR [RF | 


系统 数据 源 


各 条 驱动 程序 


WR 
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| 是 必 可 生 和 款 


三 = 一生 一 = 


E73 取 朋 EE E77 
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图 10-13 “系统 DSN” 选 项 卡 图 10-14 “创建 新 数据 源 ” 对 话 框 
太 提示 太 


64 位 Windows 7 的 操作 系统 里 ODBC 无 法 添加 “修改 ”配置 ， 添 加 数据 源 时 只 有 SQL Server 可 选 。 
如 图 10-15 所 示 。 


10-15 只 有 SQL Server 可 选 
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解决 方法 是 : 
通过 C:/WindowsSysWOW64/odbcad32.exe 启动 32 位 版 本 ODBC 管理 工具, 便 可 解决 ,效果 如 图 10-16 
所 示 。 


图 10-16 启动 32 位 版 本 ODBC 管理 工具 


步骤 034 弹出 如 图 10-17 所 示 的 “ODBC Microsoft Access 安装 ”对 话 框 ， 选 择 数据 库 的 路 径 ， 
在 “数据 源 名 ”文本 框 中 输入 数据 源 的 名 称 ， 单 击 “确定 ”按钮 ， 在 如 图 10-18 所 示 的 
对 话 框 中 可 以 看 到 创建 的 数据 源 mdb。 
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10-17 “ODBC Microsoft Access 安装 ”对 话 框 图 10-18 创建 的 数据 源 
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本 章 导读 


从 HTML4 诞生 以 来 ， 整 个 互联 网 环境 、 硬 件 环境 都 发 生 了 翻天 履 地 的 变化 ， 开 发 者 期 望 
标准 统一 、 用 户 渴 望 更 好 体验 的 呼声 越 来 越 高 。2010 年 ， 随 着 HTML5 的 迅猛 发 展 ， 各 大 浏览 
器 开发 公司 如 Google、 微软 、 革 果 和 Opera 的 浏览 器 开发 业务 都 变 得 异常 繁忙 。 在 这 种 局 势 下 ， 
学 习 HTML5 无 疑 成 为 Web 开发 者 的 一 大 重要 任务 ， 谁 先 学 会 HTML5， 谁 就 掌握 了 迈 向 未 来 
Web 平台 的 一 把 钥匙 。CSS3 极 大 地 简化 了 CSS 的 编程 模型 ， 它 不 仅 对 已 有 的 功能 进行 了 扩展 
和 延伸 , 而 且 更 多 的 是 对 Web UI 的 设计 理念 的 和 方法 进行 了 革新 。 在 未 来 , CSS3 配合 HTML5 
标准 ， 将 掀起 一 场 新 的 Web 应 用 变革 ， 甚 至 是 整个 互联 网 产业 的 变革 。 


技术 要 点 


HTML5 特点 

HTMI5 基本 布局 

HTML5 结构 元 素 

CSS3 的 发 展 历史 

CSS3 新 增 特性 

使 用 CSS3 实现 圆 角 表格 


11.1 HTML5 简介 


HTML5 的 发 展 越 来 越 迈 向 成 熟 ， 很 多 的 应 用 已 经 逐渐 出 现在 日 常生 活 中 了 。 不 仅 让 传统 网 
站 上 的 互动 Flash 逐渐 地 被 HTMLS 的 技术 取代 ， 更 重要 的 是 , 可 以 通过 HTML5 的 技术 来 开发 跨 
平台 的 手机 软件 ， 让 许多 开发 者 感到 十 分 兴奋 。 


11.1.1 HTML5 的 特点 


HTML5 是 一 种 设计 来 组 织 Web 内 容 的 语言 ， 其 目的 是 通过 创建 一 种 标准 的 和 直观 的 UI 标 
记 语 言 来 把 Web 设计 和 开发 变 得 容易 起 来 。HTML5 提供 了 一 些 新 的 元 素 和 属性 ， 例 如 <nav> 和 
<footer>。 除 此 之 外 ， 还 有 一 些 如 下 的 特点 。 
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1. 取消 了 一 些 过 时 的 HTML4 标签 


HTML5 取消 了 一 些 纯粹 显示 效果 的 标签 ,如 <font> 和 <center>, 它们 已 经 被 CSS 取代 ,HTML5 
吸取 了 XHTML2 一 些 建议 ,包括 一 些 用 来 改善 文档 结构 的 功能 , 如 新 的 HTML 标签 header、footer、 
dialog、aside、figure 等 的 使 用 ， 将 使 内 容 创 作者 更 加 容易 地 创建 文档 。 


2. 将 内 容 和 展示 分 离 

b 和 i 标签 依然 保留 ， 但 它们 的 意义 已 经 与 之 前 有 所 不 同 ， 这 些 标签 的 意义 只 是 为 了 将 一 段 
文字 标识 出 来 ， 而 不 是 为 它们 设置 粗 体 或 斜体 样式 。u、font、center、strike 这 些 标 签 则 被 完全 去 
掉 了 。 

3. 一 些 全 新 的 表单 输入 对 象 


增加 了 包括 日 期 、URL、E-mail 地 址 ， 其 他 的 对 象 则 增加 了 对 非 拉丁 字符 的 支持 。HTML5 
还 引入 了 微 数据 ， 这 一 使 用 机 器 可 以 识别 的 标签 标注 内 容 的 方法 ， 使 语义 Web 的 处 理 更 加 简单 。 
总 的 来 说 ， 这 些 与 结构 有 关 的 改进 使 内 容 创 建 者 可 以 创建 更 干净 、 更 容易 管理 的 网 页 。 


4. 全 新 的 、 更 合理 的 标签 


多 媒体 对 象 将 不 再 全 部 绑 定 在 object 或 embed 标签 中 , 而 是 视频 有 视频 的 标签 , 音频 有 音频 
的 标签 。 


5. 支持 音频 的 播放 /录音 功能 


目前 在 播放 /录制 音频 的 时 候 可 能 需要 用 到 Flash、Quicktime 或 者 Java， 而 这 也 是 HTML5 的 
新 功能 之 一 。 


6. 本 地 数据 库 


这 个 功能 将 内 嵌 一 个 本 地 的 SQL 数据 库 ， 以 加 速 交互 式 搜索 、 缓 存 以 及 索引 功能 。 同 时 ， 那 
些 离线 Web 程序 也 将 因此 获 益 菲 浅 。 


7. Canvas 对 象 

将 给 浏览 器 带 来 直接 在 上 面 绘制 矢量 图 的 能 力 ， 这 意味 着 用 户 可 以 脱离 Flash 和 Silverlight， 
直接 在 浏览 器 中 显示 图 形 或 动画 。 

8. 支持 丰富 的 2D 图 片 

HTML5 内 嵌 了 所 有 复杂 的 二 维 图 片 类 型 。 同 目前 网 站 加 载 图 片 的 方式 相 比 ， 它 的 运行 速度 
要 快 得 多 。 


9. 支持 即时 通信 功能 


在 HTML5 中 内 置 了 基于 Web sockets 的 即时 通信 功能 ， 一 旦 两 个 用 户 之 间 启 动 了 这 个 功能 ， 
就 可 以 保持 顺畅 的 交流 。 
截至 目前 而 言 ， 主 流 的 网 页 浏览 器 Firefox 5、Chrome 12 和 Safari 5 都 已 经 支持 了 许多 的 
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HTML5 标准 ， 而 且 目前 最 新 版 的 IE 9 也 支持 了 许多 HTML5 标准 。 
11.1.2 HTML5 基本 布局 


随 着 HTML5 的 发 展 ， 前 端 开 发 者 们 终于 从 原本 充斥 着 大 量 div、span 的 html 结构 中 解放 出 
来 ， 开 始 使 用 HTML5 来 布局 整个 网 站 。 同 时 ， 由 于 HTMLS 补充 了 大 量 的 新 的 页 面 标签 ， 所 以 
从 语意 化 的 角度 考虑 ， 势 必 对 页 面 的 布局 将 产生 一 定 的 影响 。 

以 HTML 4 的 基本 两 栏 布局 为 例 ， 如 图 11-1 所 示 。HTML5 对 应 的 布局 如 图 11-2 所 示 。 


<div id=“header”> 


<div class=“article"”> 


<div id=“sidebar"> 
<div class="section"> 


11-1 HTML 4 的 基本 两 栏 布局 


<header> 


<article> 


<aside> 


<section> 


图 11-2 HTML5 对 应 的 布局 


在 HTML4 中 由 于 缺少 结构 ， 即 使 是 形式 良好 的 HTML 页 面 也 比较 难以 处 理 。 必 须 分 析 标 题 
的 级 别 ， 才 能 看 出 各 个 部 分 的 划分 方式 。 边 栏 、 页 脚 、 页 眉 、 导 航 条 、 主 内 容 区 和 各 篇 文章 都 由 
通用 的 DIV 元 素来 表示 。 
我 们 来 考虑 一 个 典型 的 博客 主页 ， 它 的 顶部 有 页 眉 ， 底 部 有 页 脚 ， 还 有 几 篇 文章 、 一 个 导航 
区 和 一 个 边栏 ， 下 面 是 使 用 HTML4 时 的 代码 。 
<html> 
<head> 
<title> 莹 莹 博客 </title> 
</head> 
<body> 
<div id="header"> 
<div class="hgroup"> 


<h1> 网 站 标题 </h1> 
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<h2> 网 站 副标题 </h2> 
</div> 

<div id="nav"> 

<ul> 
<li>Dreamweaver</1i> 
<li>Flash</1i> 
<1i>Photoshop</1i> 
</ul> 

</div> 

</div> 

<div id="left"> 

<div class="article"> 
<p> 这 是 一 篇 讲述 网 页 设计 的 文章 。</p> 
</div> 

<div class="article"> 


<p> 这 还 是 一 篇 讲述 网 站 开发 的 文章 。</p> 


</div> 

</div> 

<div id="aside"> 

<h1> 作 者 简介 </h1l> 

<p> 莹 莹 ， 专 业 的 网 页 设计 开发 工程 师 。</p> 
</div> 

<div id="footer"> 

版 权 所 有 莹 莹 </div> 

</body> 

</html> 


上 面 是 一 个 简单 的 博客 页 面 的 HTML， 由 头 部 、 文章 展示 区 、 右 侧 栏 、 底 部 组 成 。 编 码 整 洁 ， 
也 符合 XHTML 的 语义 化 ， 即 便 是 在 HTML5 中 也 可 以 有 很 好 的 表现 。 但 是 对 浏览 器 来 说 ， 这 就 
是 一 段 没 有 区 分 开 的 代码 。HTMLS 新 标签 的 出 现 ， 正 好 弥补 了 这 一 缺憾 。 那 么 ， 上 面 的 代码 ， 
换 成 HTMLS 就 可 以 这 样 写 。 


<html> 
<head> 
<tit1le> 莹 莹 博客 </title> 
</head> 
<body> 
<header> 
<hgroup> 
<h1> 网 站 标题 </h1> 
<h2> 网 站 副标题 </h2> 
</hgroup> 
<nav> 
<ul> 
<li>Dreamweaver</1i> 
<1li>Flash</1i> 
<1i>Photoshop</1i> 
</ul> 
</nav> 
</header> 
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<div id="left"> 

<article> 

<p> 这 是 一 篇 讲述 网 页 设计 的 文章 。</p> 
</article> 

<article> 

<p> 这 还 是 一 篇 讲述 网 站 开发 的 文章 。</p> 
</article> 

</div> 

<aside> 

<h1> 作 者 简介 </h1> 

<p> 莹 荧 ， 专 业 的 网 页 设计 开发 工程 师 。</p> 
</aside> 
<footer> 版 权 所 有 莹 莹 </footer> 
</body> 

</html> 


看 来 HTML 的 页 面 结构 可 以 如 此 之 美 , 不 用 注释 也 能 一 目 了 然 。 对 于 浏览 器 ， 找 到 对 应 的 区 
块 也 不 再 会 茫然 无 措 。 不 再 需要 自己 设置 class 属性 ， 从 标准 的 元 素 名 就 可 以 推断 出 各 个 部 分 的 意 
义 。 这 对 于 音频 浏览 器 、 手 机 浏览 器 和 其 他 非 标准 浏览 器 尤其 重要 。 在 浏览 器 浏览 效果 如 图 11-3 
所 示 。 


这 还 是 一 篇 讲述 网 站 开发 的 文章 。 


作者 简介 


车 本 ， 专 业 的 网 页 设计 开发 工程 师 . 
版 权 所 有 莹 歼 


图 11-3 浏览 器 浏览 效果 
11.2 HTML5 结构 元 素 


通过 使 用 了 新 的 结构 元 素 ，HTMLS5 的 文档 结构 比 大 量 使 用 DIV 元 素 的 HTML4 的 文档 结构 
清晰 、 明 确 了 很 多 。 如 果 再 规划 好 文档 结构 的 大 岗 ， 就 可 以 创建 出 对 人 、 对 其 他 程序 来 说 ， 都 很 
清晰 易 读 的 文档 结构 。HTML5 添加 了 一 些 新 元 素 ， 专 门 用 来 标识 这 些 常 见 的 结构 : 

@ section: 用 来 表现 普通 的 文档 内 容 或 应 用 区 块 。 一 个 section 通常 由 内 容 及 其 标题 组 成 。 

@ header: 页 面 上 显示 的 页 眉 。 

@ aside: 可 以 包含 与 当前 页 面 或 主要 内 容 相关 的 引用 、 侧 边栏 、 广 告 、nav 元 素 组 以 及 其 他 


225 


( IT 


类 似 的 有 别 于 主要 内 容 的 部 分 。 

@ footer: 页 脚 ，footer 通常 包括 其 相关 区 块 的 附加 信息 ， 如 作者 、 相 关 阅 读 链接 以 及 版 权 信 
息 等 。 

@ nav: 用 来 将 具有 导航 性 质 的 链接 划分 在 一 起 ， 使 代码 结构 在 语义 化 方面 更 加 准确 ， 同 时 
对 于 屏幕 阅读 器 等 设备 的 支持 也 更 好 。 

@ article: 元 素 用 来 在 页 面 中 表示 一 套 结 构 完 整 且 独立 的 内 容 部 分 。article 可 以 用 来 呈现 论坛 
的 一 个 帖子 ， 杂 志 或 报纸 中 的 一 篇 文章 ， 一 篇 博客 ， 用 户 提交 的 评论 内 容 ， 可 互动 的 页 面 
模块 挂件 等 。 


11.2.1 header 


header 的 页 面 头 部 元 素 ， 也 称 为 页 眉 。 页 眉 是 页 面 的 第 一 个 元 素 ， 包 含 了 站 点 的 标题 、logo 
等 。 页 眉 的 作用 是 组 织 “ 介 绍 性 或 导航 性 ”元 素 。 
我 们 在 平常 做 网 站 定义 网 站 头 部 如 果 用 DIV 的 话 那么 就 会 这 样 : 


<div id="header"> 
</div> 
我 们 现在 来 看 看 HTML5 提供 的 元 素 <header>: 
<header> 
<h1> 风 一 样 的 博客 </h1> 


</header> 


页 眉 也 可 以 包含 导航 ， 这 对 全 站 导航 很 有 用 ， 可 以 将 <nav> 放 在 <header> 中 ， 也 可 以 将 <nav> 
放 在 <header> 之 外 。 如 下 所 示 代 码 是 一 个 header 的 使 用 实例 ，<nav> 就 在 <header> 之 中 。 


<title> 清 韵 </title> 
<header> 
<div class="1ogo"> 
<h1l><a href="index.html"><strong> 清 韵 博 主 </strong></a></h1> 
</div> 
<nav> 
<ul> 
<li><a href="index.html"> 主 页 </a></1i> 
<1i><a href="index-1.html"” > 谈天 说 地 </a></1i> 
<1i><a href="index-2.html"> 摄 影 之 家 </a></1i> 
<1i><a href="index-3.html"> 谈 股 论 金 </a></1i> 
</ul> 
</nav> 
</header> 


在 浏览 器 中 浏览 效果 如 图 11-4 所 示 ， 可 以 看 到 一 个 网 站 的 标题 ， 另 外 有 网 站 的 导航 部 分 。 
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图 11-4 header 使 用 实例 


11.2.2 nav 


HTML5 结构 元 素 <nav> 元 素 用 于 构建 一 个 页 面 或 一 个 站 点 内 的 链接 。 与 <header> 和 <footer> 
一 样 ， 我 们 并 不 限制 每 个 页 面 中 <nav> 元 素 的 数量 。 在 一 个 页 眉 中 ， 可 以 有 全 站 的 <nav>， 作 为 当 
前 文章 的 目录 的 一 个 <nav>， 以 及 在 其 下 面 链接 到 站 点 的 其 他 相关 文章 的 <nav>。 

<nav> 

<p><a href="/"> 首 页 </a></p> 
<p><a href="/about"> 自 我 介绍 </a></p> 

</nav> 

<nav> 元 素 的 内 容 可 能 是 链接 的 一 个 列表 ,标记 为 一 个 无 序 的 列表 ,或 者 是 一 个 有 序 的 列表 。 
注意 ，<nav> 元 素 是 一 个 包装 器 ， 它 不 会 蔡 代 <ol> 或 <ul> 元 素 ， 但 是 会 包围 它 。 也 可 以 包含 标题 以 
用 于 导航 。 

<nav> 

<h2> 网 站 导航 </h2> 
<ul> 
<1i><a href="about"> 自 我 介绍 </a></1i> 
<1i><a href="news"> 新 闻 动态 </a></1i> 
<1i><a href="news"> 个 人 爱好 </a></1i> 
<1i><a href="news"> 语 文联 系 </a></1i> 
</ul> 
</nav> 


11.2.3 footer 
页 脚 footer 一 般 包 含 版 权 数 据 、 导 航 信息 、 备 案 信 息 、 联 系 方式 等 内 容 。 长 久 以 来 ， 我 们 习 
惯 于 使 用 <div id="footer"> 这 样 的 代码 作为 页 面 的 页 脚 。 在 HTML5 中 ， 我 们 可 以 使 用 用 途 更 广 、 


扩展 性 更 强 的 <footer> 元 素 了 。 
在 HTML4 中 我 们 在 定义 网 站 尾部 ， 像 版 权 等 信息 通常 是 这 样 定义 的 : 


<div id="footer"> 
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<ul> 
<1i> 版 权 声 明 </1i> 

<1i> 站 点 地 图 </1i> 
<1i> 联 系 我 们 </1i> 
</ul> 

</div> 

在 HTML5 中 ， 我 们 可 以 不 使 用 DIV， 而 用 更 加 语义 化 的 footer 来 写 : 

<footer> 
<ul> 
<1i> 版 权 声明 </1i> 
<1i> 站 点 地 图 </1i> 
<1i> 联 系 我 们 </1i> 
</ul> 

</footer> 


在 同一 个 页 面 中 可 以 使 用 多 个 <footer> 元 素 ， 即 可 以 用 作 页 面 整体 的 页 脚 ， 也 可 以 作为 一 个 
内 容 区 块 的 结尾 ， 例 如 ， 我 们 可 以 将 <footer> 直 接 写 在 <section> 或 是 <article> 中 : 


<article> 
文章 内 容 ... 
<footer> 
文章 内 容 尾 部 信息 .. . 
</footer> 
</article> 


11.2.4 article 


article 元 素 用 来 在 页 面 中 表示 一 套 结构 完整 且 独 立 的 内 容 部 分 。article 可 以 用 来 呈现 论坛 的 
一 个 帖子 、 杂 志 或 报纸 中 的 一 篇 文章 、 一 篇 博客 ， 用 户 提交 的 评论 内 容 ， 可 互动 的 页 面 模块 等 。 

一 个 网 页 中 可 能 有 多 个 独立 的 article 元 素 ， 每 一 个 article 元 素 都 允许 有 自己 的 标题 与 脚注 等 
从 属 元 素 ， 允 许 对 自己 的 从 属 元 素 单独 使 用 样式 。 如 一 个 网 页 中 的 样式 可 能 如 下 所 示 。 


header{display:block;color:red;text-align:center;} 
aritcle header{color:red;text-align:center;} 


下 面 是 一 个 使 用 article 元 素 的 实例 ， 其 代码 如 下 。 


<html> 
<head> 我 的 博客 </head> 
<body> 

<header> 

<h1> 我 的 博客 </h1> 
</header> 

<nav> 

<ul> 

<1i> 主 页 </1i> 
<1i> 儿 童 教育 </1i> 
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<1i> 心 理 健 康 </1i> 

</ul> 

</nav> 

<section> 

<h1> 我 的 文章 </h1> 

<article> 

<p> 孩 子 做 事 爱 磨 足 , 通常 是 因为 他 们 不 像 成 人 一 样 具有 时 间 紧 迫 感 ， 他 们 的 时 间 概念 比较 模糊 。 一 般 

言 ， 孩 子 并 不 知道 如 果 他 把 一 件 事 尽快 做 完 之 后 会 有 什么 更 好 的 结果 。 他 也 不 认为 自己 慢 有 什么 不 好 的 。 

比如 吃饭 ,成 人 都 会 知道 ， 不快 点 吃饭 就 凉 了 ， 吃 完 饭 还 有 其 他 什么 事 ， 而 孩子 不 会 明白 这 许多 ,他 想 的 只 
是 眼前 的 事情 。 所 以 ， 家 长 应 该 从 小 培养 孩子 的 时 间 观 念 . . . .. . 

</p> 

<p> 大 多 数 情况 下 ,男孩 受到 的 表扬 越 多 ,他 们 对 自己 的 期 望 就 越 高 越 努力 ,这 种 表扬 和 肯定 会 使 男孩 
确认 自己 的 判断 ， 对 自己 的 能 力 感到 惊喜 ， 他 的 下 一 次 努力 就 会 更 有 信心 ， 当 成 就 欲 一 步 一 步 地 得 到 提升 ， 
男孩 的 潜力 就 逐步 地 被 挖掘 出 来 。. . . .. . </p> 

</article> 

</section> 

<footer> 

</footer> 

</body> 

</html> 


11.3 ”预览 激动 人 心 的 CSS3 


随 着 用 户 要 求 的 不 断 提高 、 各 种 新 型 网 络 应 用 的 不 断 出 现 ， 以 及 Web 技术 自身 的 高 速 发 展 ， 
CSS2 在 Web 开发 中 显得 越 来 越 力不从心 ， 人 们 对 下 一 代 CSS 技术 和 标准 一 一 CSS3 的 需求 越 来 
越 迫 切 。 


11.3.1 CSS3 的 发 展 历史 


20 世纪 90 年 代 初 ，HTML 语言 诞生 ， 各 种 形式 的 样式 表 也 开始 出 现 。 各 种 不 同 的 浏览 器 结 
合 自身 的 显示 特性 ， 开 发 了 不 同 的 样式 语言 ， 以 便于 读者 自己 调整 网 页 的 显示 效果 。 注 意 ， 此 时 
的 样式 语言 仅 供 读者 使 用 ， 而 非 供 设 计 师 使 用 。 

早期 的 HTML 语言 仅 含有 很 少量 的 显示 属性 ， 用 来 设置 网 页 和 字体 的 效果 。 随 着 HTML 的 
发 展 ， 为 了 满足 网 页 设计 师 的 要 求 ，HTML 不 断 添 加 了 很 多 用 于 显示 的 标签 和 属性 。 由 于 HTML 
的 显示 属性 和 标签 比较 丰富 ， 其 他 的 用 来 定义 样式 的 语言 就 越 来 越 没有 意义 了 。 

在 这 种 背景 下 ，1994 年 初 哈 坤 。 利 提出 了 CSS 的 最 初 想法 。 伯 特 。 波 斯 (Bert Bos) 当时 正 
在 设计 一 款 Argo 浏览 器 ， 于 是 他 们 一 拍 即 合 ， 决 定 共同 开发 CSS。 当 然 ， 这 时 市 面 上 已 经 有 一 
些 非 正式 的 样式 表 语 言 的 提议 了 。 

哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 建议 ，1995 年 他 与 波斯 一 起 再 次 
展示 这 个 建议 。 当 时 W3C 刚刚 建立 ，W3C 对 CSS 的 发 展 很 感 兴趣 ， 它 为 此 组 织 了 一 次 讨论 会 。 
哈 坤 、 波 斯 和 其 他 一 些 人 是 这 个 项 目的 主要 技术 负责 人 。1996 年 底 ，CSS 已 经 完成 。1996 年 12 
月 CSS 要 求 的 第 一 版 本 被 出 版 。 
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1998 年 5 月 ，CSS2 正式 发 布 。CSS2 是 一 套 全 新 的 样式 表 结 构 ， 是 由 W3C 推行 的 。 与 以 往 
的 CSS1 或 CSS1.2 完全 不 一 样 ，CSS2 推荐 的 是 一 套 内 容 和 表现 效果 分 离 的 方式 。HTML 元 素 可 
以 通过 CSS2 的 样式 控制 显示 效果 ， 可 完全 不 使 用 以 往 HTML 中 的 table 和 td 来 定位 表单 的 外 观 
和 样式 ， 只 需 使 用 div 和 Li 此 类 HTML 标签 来 分 割 元 素 ， 之 后 即 可 通过 CSS2 样式 来 定义 表单 
界面 的 外 观 。 

早 在 2001 年 5 月 ，W3C 就 着 手 开始 准备 开发 CSS 第 3 版 规范 。CSS3 规范 一 个 新 的 特点 是 
规范 被 分 为 若干 个 相互 独立 的 模块 。 一 方面 分 成 若干 较 小 的 模块 较 利 于 规范 及 时 更 新 和 发 布 ， 及 
时 调整 模块 的 内 容 ， 这 些 模块 独立 实现 和 发 布 ， 也 为 日 后 CSS 的 扩展 芮 定 了 基础 。 另 外 一 方面 ， 
由 于 受 支持 设备 和 浏览 器 厂商 的 限制 ， 设 备 或 者 厂商 可 以 有 选择 的 支持 一 部 分 模块 ， 支 持 CSS3 
的 一 个 子 集 。 这 样 将 有 利于 CSS3 的 推广 。 

CSS3 的 产生 大 大 简化 了 编程 模型 ， 它 不 是 仅 对 已 有 功能 的 扩展 和 延伸 ， 而 更 多 的 是 对 Web 
UI 设计 理念 的 和 方法 的 革新 。 相 信 未 来 CSS3 配合 HTMLS 标准 , 将 极 大 地 引起 一 场 Web 应 用 的 
变革 ， 甚 至 是 整个 Internet 产业 的 变革 。 


11.3.2 CSS3 新 增 特性 


CSS3 中 引入 的 新 特性 和 功能 。 这 些 新 特性 极 大 地 增强 了 Web 程序 的 表现 能 力 ， 同 时 简化 了 
Web UI 的 编程 模型 。 下 面 将 详细 介绍 这 些 CSS3 的 新 增 特性 。 

1. 强大 的 选择 器 

CSS3 的 选择 器 在 CSS2.1 的 基础 上 进行 了 增强 ， 它 允许 设计 师 在 标签 中 指定 特定 的 HTML 
元 素 而 不 必 使 用 多 余 的 类 、ID 或 者 JavaScript 脚本 。 

如 果 希 望 设计 出 简洁 、 轻 量 级 的 网 页 标签 ， 希 望 结 构 与 表现 更 好 地 分 离 ， 高 级 选择 器 是 非常 
有 用 的 。 它 可 以 大 大 简化 我 们 的 工作 ， 提 高 编写 代码 效率 ， 并 让 我 们 很 方便 地 制作 出 可 维护 性 的 
页 面 。 

2. 半 透 明度 效果 的 实现 

RGBA 不 仅 可 以 设 定 色彩 ， 还 能 设 定 元 素 的 透明 度 。 无 论 是 文本 、 背 景 还 是 边框 均 可 使 用 该 
属性 。 该 属性 的 语法 在 其 支持 的 浏览 器 中 相同 。 

RBGA 颜色 代码 示例 : 

background:rgba(252, 253, 202, 0.70); 

上 面 代码 所 示 ， 前 三 个 参数 分 别 是 R、G、B 三 原色 ， 范 围 是 0~255。 第 四 个 参数 是 背景 透明 
度 ， 范 围 是 0~-1， 如 0.70 代表 透明 度 70%。 这 个 属性 使 我 们 在 浏览 器 中 也 可 以 做 到 像 Windows 7 
一 样 的 半 透 明 玻 璃 效果 ， 如 图 11-5 所 示 。 


图 11-5 ” 半 透 明度 效果 
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目前 支持 RBGA 颜色 的 浏览 器 有 : Safari 4+、Chrome 1+、Firefox 3.0.5+ 和 Opera 9.5S+， 正 
全 系列 浏览 器 暂 都 不 支持 该 属性 。 

3. 多 栏 布局 

新 的 CSS3 选择 器 可 以 让 用 户 不 必 使 用 多 个 DIV 标签 就 能 实现 多 栏 布局 。 浏览 器 解释 这 个 属 
性 并 生成 多 栏 ， 让 文本 实现 一 个 仿 报纸 的 多 栏 结 构 。 如 图 11-6 所 示 网 页 显示 为 4 栏 ， 这 4 栏 并 非 
浮动 的 DIV 而 是 使 用 CSS3 多 栏 布局 。 


Sociis natoque penati 


时 es ， 希 sewp 人 ae 


Make a Different Way of Your Future 9 breed 


Nowslettor signup 


图 11-6 多 栏 布局 
4. 多 背景 图 


CSS3 允许 背景 属性 设置 多 个 属性 值 ， 如 background-image 、 background-repeat 、 
background-size、background-position 、background-originand、background-clip 等 ， 这 样 就 可 以 在 
一 个 元 素 上 添加 多 层 背 景 图 片 。 

在 一 个 元 素 上 添加 多 背景 最 简单 的 方法 是 使 用 简写 代码 ， 你 可 以 指定 上 面 的 所 有 属性 到 一 条 
声明 中 ， 只 是 最 常用 的 还 是 image、position 和 repeat， 如 下 代码 所 示 。 

div { 

background: url (example.jpg) top left no-repeat, 
Url (example2.jpg) bottom left no-repeat, 


url (example3.jpg) center center repeat-y; 
Ls 


5. 块 阴影 和 文字 阴影 


尽管 box-shadow 和 text-shadow 在 CSS2 中 就 已 经 存在 ， 但 是 它们 未 被 广泛 应 用 ， 它 们 将 在 
CSS3 中 被 广泛 采用 。 块 阴影 和 文字 阴影 可 以 不 用 图 片 就 能 对 HTML 元 素 添加 阴影 ， 增 加 显示 的 
立体 感 增强 设计 的 细节 。 块 阴影 使 用 box-shadow 属性 ， 文 字 属性 使 用 text-shadow 属性 ， 该 属性 
目前 在 Safari 和 Chrome 中 可 用 。 


box-shadow: 5px 5px 25px #cc000c; 
text-shadow: Spx 5px 25px #cc000c; 
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前 两 个 属性 设置 阴影 的 X/Y 位 移 ， 这 里 分 别 是 5px， 第 3 个 属性 定义 阴影 的 模糊 程度 ， 最 
后 一 个 设置 阴影 的 颜色 。 
下 面 看 text-shadow 属性 的 使 用 实例 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>text-shadow</title> 

<meta charset="utf-8" /> 

<style> 

body { 
background-color:#666; 

hl { 
text-shadow:0 lpx 0 #fff; 
Color:#292929; 
font:bold 90px/100% Arial; 
padding:50px; 

} 

</style> 

</head> 

<body> 

<hl>Hello,World!</h1> 

</body> 

</html> 


运行 效果 ， 在 firefox 浏览 器 中 预览 效果 如 图 11-7 所 示 。 


图 11-7 文字 阴影 


6. 圆 角 

CSS3 新 功能 中 最 常用 的 一 项 就 是 圆 角 效果 ， Border-radius 无 须 背景 图 片 就 能 给 HTML 元 素 
添加 圆 角 。 不 同 于 添加 JavaScript 或 多 余 的 HTML 标签 ， 仅 仅 需要 添加 一 些 CSS 属性 并 从 好 的 
方面 考虑 。 这 个 方案 是 清晰 的 和 比较 有 效 的， 而且 可 以 让 你 免 于 花费 几 个 小 时 来 寻找 精巧 的 浏览 
器 方案 和 基于 JavaScript 圆 角 。 

Border-radius 的 使 用 方法 如 下 : 


border-radius: 5Px 5Px 5Px Spx; 


radius， 就 是 半径 的 意思 。 用 这 个 属性 可 以 很 容易 做 出 圆 角 效果 ， 当 然 也 可 以 做 出 圆 形 效果 。 
如 图 11-8 所 示 CSS3 制作 的 圆 角 表格 。 
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Flash Templales 
Css Templates 
Web Design Aricles 


Royalty Free Photos 


图 11-8 CSS3 制作 的 圆 角 表格 

目前 IE9、webkit 核心 浏览 器 、FireFox3+ 都 支持 该 属性 。 

7. 边框 图 片 

borderimage 属性 允许 在 元 素 的 边框 上 设置 图 片 ， 这 使 得 原本 单调 的 边框 样式 变 得 很 丰富 。 
让 你 从 通常 的 solid、dotted 和 其 他 边框 样式 中 解放 出 来 。 该 属性 给 设计 师 一 个 更 好 的 工具 ， 用 它 
可 以 方便 地 定义 设计 元 素 的 边框 样式 ， 比 background-image 属性 或 枯燥 的 默认 边框 样式 更 好 用 。 
也 可 以 明确 的 定义 一 个 边框 可 以 被 如 何 缩放 或 平 铺 。 

border-image 的 使 用 方法 如 下 : 


border: 5px solid #cccccce; 
border-image: url (/images/border-image.png) 5 repeat; 


如 图 11-9 所 示 就 是 CSS3 制作 的 边框 图 片 。 
EEEEEEEEEEEEEEEEEO 


11-9 CSS3 制作 的 边框 图 片 


8. 形变 效果 
通常 使 用 CSS 和 HTML 我 们 是 不 可 能 使 HTML 元 素 旋转 或 者 倾斜 一 定 角度 的 。 为 了 使 元 素 
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看 起 来 更 具有 立体 感 ， 我 们 不 得 不 把 这 种 效果 做 成 一 个 图 片 ， 这 样 就 限制 了 很 多 动态 的 使 用 应 用 
场景 。Transform 属性 的 引入 使 我 们 以 前 通常 要 借助 SVG 等 矢量 绘图 手段 才能 实现 的 功能 ， 只 有 
要 一 个 简单 的 CSS 属性 就 能 实现 。 在 CSS3 中 Transform 属性 主要 包括 rotate 旋转 、scale 缩放 、 
translate 坐标 平移 、skew 坐标 倾斜 、matrix 矩阵 变换 等 。 如 图 11-10 所 示 对 元 素 的 形变 效果 。 


图 11-10 ”对 元 素 的 形变 效果 
目前 支持 形变 的 浏览 器 有 Webkit 系列 浏览 器 、FireFox3.5+、Opear10.5+, IE 全 系列 不 支持 。 


9. 媒体 查询 

媒体 查询 (Media Queries) 可 以 让 你 为 不 同 的 设备 基于 它们 的 能 力 定义 不 同 的 样式 。 如 在 可 
视 区 域 小 于 400 像素 的 时 候 ， 想 让 网 站 的 侧 栏 显 示 在 主 内 容 的 下 边 ， 这 样 它 就 不 应 该 浮动 并 显示 
在 右 侧 了 : 


#sidebar { 
float: right; 
display: inline; 
小 
@media all and (max-width:400px) { 
#sidebar { 
float: none; 
clear: both; 
} 


| 
也 可 以 指定 使 用 滤 色 屏 的 设备 : 
a 
Color: grey; 
’ 
@media screen and (color) { 
| 
color: red; 
} 
} 


这 个 属性 是 很 有 用 的 ， 因 为 不 用 再 为 不 同 的 设备 写 独立 的 样式 表 了 ， 而 且 也 无 须 使 用 JS 来 
确定 每 个 用 户 的 浏览 器 的 属性 和 功能 。 基 于 JavaScript 的 方案 是 使 用 智能 的 流体 布局 ， 让 布局 对 
于 用 户 的 浏览 器 分 辩 率 更 加 灵活 。 

媒体 查询 被 基于 webkit 核心 的 浏览 器 和 Opera 支持 ，Firefox 在 3.5 版 本 中 支持 它 , IE 目前 不 
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支持 这 些 属性 。 
10. CSS3 线性 渐变 


渐变 色 是 网 页 设计 中 很 常用 的 一 项 元 素 ， 它 可 以 增强 网 页 元 素 的 立体 感 ， 同 时 使 单一 颜色 的 
页 面 看 起 来 不 是 那么 突 克 。 过 去 为 了 实现 渐变 色 ， 通 常 需要 先 制 作 一 个 渐变 的 图 片 ， 将 它 切 割 成 
很 细 的 一 小 片 ， 然 后 使 用 背景 重复 使 整个 HTML 元 素 拥有 渐变 的 背景 色 。 这 样 做 有 两 个 弊端 : 为 
了 使 用 图 片 背景 ， 很 多 时 候 使 得 本 身 简 单 的 HTML 结构 变 得 复杂 ; 另外 ， 受 制 于 背景 图 片 的 长 度 
或 宽度 ，HTML 元 素 不 能 灵活 的 动态 调整 大 小 。CSS3 中 Webkit 和 Mozilla 对 渐变 都 有 强大 的 支 
持 ， 如 图 11-11 所 示 就 是 使 用 CSS3 制作 的 渐变 背景 图 。 


图 11-11 使 用 CSS3 制作 的 渐变 背景 图 
从 上 面 的 效果 图 可 以 看 出 , 线性 渐变 是 一 个 很 强大 的 功能 。 使 用 很 少 的 CSS 代码 ,就 能 做 出 


以 前 需要 使 用 很 多 图 片 才能 完成 的 效果 。 很 可 惜 的 是 ， 目 前 支持 该 属性 的 浏览 器 只 有 最 新 版 的 
Safari、Chrome、Firefox 浏览 器 支持 ， 并 且 语 法 差异 较 大 。 


11.3.3 主流 浏览 器 对 CSS3 的 支持 


CSS3 带 来 了 众多 全 新 的 设计 体验 ， 但 是 并 不 是 所 有 浏览 器 都 完全 支持 它 。 当 然 ， 网 页 不 需 
要 在 所 有 浏览 器 中 看 起 来 都 严格 一 致 ， 有 时 候 在 某 个 浏览 器 中 使 用 私有 属性 来 实现 特定 的 效果 是 
可 行 的 。 

下 面 介绍 使 用 CSS3 的 注意 事项 。 


@ CSS3 的 使 用 不 应 当 影响 页 面 在 各 个 浏览 器 中 的 正常 显示 。 可 以 使 用 CSS3 的 一 些 属性 
来 增强 页 面 表现 力 和 用 户 体验 ， 但 是 这 个 效果 提升 不 应 当 影响 其 他 浏览 器 用 户 正常 访 
问 该 页 面 。 

@ 同一 页 面 在 不 同 浏览 器 中 不 必 完 全 显示 一 致 。 功 能 较 强 的 浏览 器 页 面 可 以 显示 得 更 炫 一 
些 ,而 较 弱 的 浏览 器 可 以 显示 得 不 是 那么 酷 ， 只 要 能 完成 基本 的 功能 就 行 ， 大 可 不 必 为 了 
在 各 个 浏览 器 中 得 到 同样 的 现实 效果 而 大 费 周 折 。 

@ 在 不 支持 CSS3 的 浏览 器 中 ， 可 以 使 用 替代 方法 来 实现 这 些 效果 ， 但 是 需要 平衡 实现 的 复 
杂 度 和 实现 的 性 能 问题 。 
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11.4 ”使 用 CSS3 实现 圆 角 表格 


传统 的 圆 角 生成 方案 ， 必 须 使 用 多 张 图 片 作为 背景 图 案 。CSS3 的 出 现 ， 使 得 我 们 再 也 不 必 浪 
费时 间 去 制作 这 些 图 片 了 ， 而 且 还 有 其 他 多 个 优点 : 
@ 减少 维护 的 工作 量 。 图 片 文件 的 生成 、 更 新 、 编 写 网 页 代码 ， 这 些 工 作 都 不 再 需要 了 。 
@ 提高 网 页 性 能 。 由 于 不 必 再 发 出 多 余 的 HTTP 请 求 ， 网 页 的 载 入 速度 将 变 快 。 
@ 增加 视觉 可 靠 性 。 某 些 情况 下 ( 网 络 拥堵 、 服 务 器 出 错 、 网 速 过 慢 等 等 )， 背 景 图 片 会 下 
载 失败 ， 导 致 视觉 效果 不 佳 。CSS3 就 不 会 发 生 这 种 情况 。 


CSS3 圆 角 只 需 设 置 一 个 属性 border-radius。 为 这 个 属性 提供 一 个 值 ， 就 能 同时 设置 4 个 圆 角 
的 半径 。CSS 度量 值 都 可 以 使 用 em、ex、pt、px、% 等 。 
下 面 是 一 个 使 用 CSS3 实现 圆 角 表格 的 代码 : 


<html 

xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 圆 角 效 果 border-radius</title> 

<style 

type="text/css"> 

body,div{margin:0;padding:0;} 

.border{ 
width:400px; 
border:20px solid #096; 
height:100px; 
-moz-border-radius:15px; /* 仅 Firefox 支持 ， 实 现 圆 角 效果 */ 
-webkit-border-radius:15px; /* 仅 Safari,Chrome 支持 ， 实 现 圆 角 效 果 */ 
-khtml-border-radius:15px; /* 仅 Safari,Chrome 支持 ， 实 现 贺 角 效果 */ 
border-radius:15px; /* 仅 Opera，Safari,Chrome 支持 ， 实 现 圆 角 效果 */ 


</style> 

</head> 

<body> 

<p>gnbsp;</p> 

<div class="border"> 使 用 border-radius 实现 最 简单 的 圆 角 表格 </div> 
</body> 

</html> 


border-radius 可 以 同时 设置 1 到 4 个 值 。 如 果 设 置 1 个 值 ， 表 示 4 个 圆 角 都 使 用 这 个 值 。 如 
果 设 置 两 个 值 ， 表 示 左 上 角 和 右 下 角 使 用 第 一 个 值 ， 右 上 角 和 左下 角 使 用 第 二 个 值 。 如 果 设 置 三 
个 值 ， 表 示 左 上 角 使 用 第 一 个 值 ， 右 上 角 和 左下 角 使 用 第 二 个 值 ， 右 下 角 使 用 第 三 个 值 。 如 果 设 
置 4 个 值 ， 则 依次 对 应 左上 角 、 右 上 角 、 右 下 角 、 左 下 角 〈 顺 时 针 顺 序 )。 

除 IE 和 迟 游 浏览 器 外 , 目前 有 Firefox, Safari, Chrome, Opera 支持 该 属性 , 其 Safari, Chrome， 
Opera 是 支持 最 好 的 。 在 firefox 浏览 器 中 浏览 效果 如 图 11-12 所 示 。 
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3) 园 角 效果 border-radius - ozilla Firefor 辐 虽 加 
文件 四 ”编辑 时) 查看 WD 历史 EG) 书签 @) 工具 上 和 帮助 加 


| 使 用 border -radius 实 现 最 简单 的 国 角 表格 


图 11-12 圆 角 表格 效果 
我 们 还 可 以 随意 指定 圆 角 的 位 置 ， 上 左 、 上 右 、 下 左 、 下 右 4 个 方向 。 上 左 贺 角 效果 代码 如 
下 所 示 ， 其 浏览 效果 如 图 11-13 所 示 。 
-moz-border-radius-topleft :15px; 


-webkit-border-top-left-radius :15px; 
border-top-left-radius :15px; 


) 上 左 回 角 效果 - 和 oxilla Firefox 


上 左 图 角 表 格 


图 11-13 上 左 圆 角 表 格 


同样 的 还 有 其 他 几 个 方向 的 圆 角 ， 这 里 就 不 再 一 一 举例 了 。 注 意 虽然 各 大 浏览 器 基本 都 支持 
border-radius， 但 是 在 某 些 细节 上 ， 实 现 都 不 一 样 。 当 4 个 角 的 颜色 、 宽 度 、 风 格 ( 实 线 框 、 虚 线 
框 等 )、 单 位 都 相同 时 ， 所 有 浏览 器 的 演 染 结果 基本 一 致 ; 一 旦 4 个 角 的 设置 不 相同 ， 就 会 出 现 很 
大 的 差异 。 因 此 ， 目 前 最 安全 的 做 法 ， 就 是 将 每 个 圆 角 边 框 的 风格 和 宽度 ， 都 设 为 一 样 的 值 ， 并 
且 避 免 使 用 百分比 值 。 
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与 修饰 网 页 图 像 


本 章 导 读 


Photoshop 主要 处 理 以 像素 所 构成 的 数字 图 像 。 使 用 其 众多 的 编 修 与 绘图 工具 ， 可 以 有 效 
地 进行 图 片 编辑 工作 。 图 像 处 理 是 对 已 有 的 位 图 图 像 进行 编辑 加 工 处 理 以 及 运用 一 些 特殊 效 
果 ， 其 重点 在 于 对 图 像 的 处 理 加 工 ; 图 形 创作 软件 是 按照 自己 的 构思 创意 ,使 用 矢量 图 形 等 来 
设计 图 形 。 本 章 将 讲述 Photoshop 的 基本 操作 。 


@ Photoshop CC 工作 界面 
@ 图 像 的 调整 

@ 设置 前 景色 和 背景 色 

@ 创建 选择 区 域 

@ 基本 绘图 工具 


机 年 从 


12.1 Photoshop CC 工作 界面 


Photoshop CC 的 工作 界面 如 图 12-1 所 示 。 
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菜单 栏 : 
选项 栏 一 上 
工具 箱 一 局 Be 
文档 窗 9 一 此 各 
“< 
. 嚼 
时 间 轴 


图 12-1 Photoshop CC 工作 界面 


12.1.1 菜单 命令 


Photoshop CC 包括 【文件 【编辑 】【 图 像 》【 图 层 】【 类 型 【选择 】【 滤 镜 】【3D1】、 
【视图 】 【窗口 】 和 【帮助 】11 个 菜单 ， 如 图 12-2 所 示 。 


文件 (F) “编辑 (日 ”图 像 册 图 层 !U ”类 型 (Y) 选择 (9 ”小 镜 由 


12-2 菜单 栏 


@ “文件 ”菜单 : 对 所 修改 的 图 像 进 行 打开 、 关 闭 、 存 储 、 输 出 、 打 印 等 操作 。 

@ “编辑 ”菜单 : 对 编辑 图 像 过 程 中 所 用 到 的 各 种 操作 ， 如 拷贝、 粘贴 等 一 些 基本 操作 。 

@ “图 像 ”菜单 : 用 来 修改 图 像 的 各 种 属性 ， 包 括 图 像 和 画布 的 大 小 、 图 像 颜色 的 调整 、 修 
正 图 像 等 。 

@ “图 层 ” 菜 单 : 图 层 的 基本 操作 命令 。 

@ “类 型 ”菜单 : 全 新 文字 系统 消除 锯齿 选项 可 提供 文字 在 网 页 上 显示 效果 的 逼真 预览 。 这 
个 新 选项 非常 符合 基于 Windows 和 Mac 泻 染 的 主流 浏览 器 的 消除 锯齿 选项 。 

@ “选择 ”菜单 : 可 以 对 选区 中 的 图 像 添加 各 种 效果 或 进行 各 种 变化 而 不 改变 选区 外 的 图 像 ， 
还 提供 了 各 种 控制 和 变换 选区 的 命令 。 

@ “ 滤 镜 ”菜单 : 用 来 添加 各 种 特殊 效果 。 

@ “3D 菜单 ": 增加 了 较 多 功能 ， 可 以 制作 出 光 感 更 为 细腻 、 纹 理 更 加 丰富 、 阴 影 更 加 逼真 
的 立体 效果 。 “实时 3D 绘画 ”模式 也 可 显著 提升 性 能 ， 并 可 最 大 限度 地 减少 失真 。 

@ “视图 ”菜单 : 用 来 调整 图 像 在 显示 方面 的 属性 。 

@ “窗口 ”菜单 : 用 于 管理 工作 环境 ， 控 制 各 种 窗口 。 
“帮助 ”菜单 : 用 于 查找 帮助 信息 。 
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12.12 工具 箱 


Photoshop 的 工具 箱包 含 了 多 种 工具 。 要 选择 使 用 这 些 工具 ， 只 要 
单 击 工具 箱 中 的 工具 按钮 即 可 ， 如 图 12-3 所 示 。 


> 

。 “ 选 框 ” 工具 图 (M): 可 选择 乱 形 、 椭 回 、 单 行 和 单列 选区 ， > 
用 来 在 图 像 中 选择 区 域 。 a 

。 “移动 ”工具 国 (V): 用 来 移动 当前 图 层 或 当前 图 层 中 选 定 的 
区 域 


@ “ 套 索 ”工具 国 (上 ): 用 来 选择 不 规则 的 选区 ， 包 括 自由 套 索 、 
多 边 形 套 索 和 磁性 套 索 工具 。 自 由 套 索 工具 适合 建立 简单 选区 ; 
多 边 形 套 索 适合 建立 棱角 比较 分 明 但 不 规则 的 选区 ， 如 多 边 形 、 
建筑 楼 房 等 ; 而 磁性 套 索 是 用 于 选择 图 形 颜 色 反差 较 大 的 图 像 ， 
颜色 反差 越 大 选取 的 图 形 越 准确 。 

@ “ 魔 棒 ” 工 具 国 (W ): 以 点 取 的 颜色 为 起 点 选取 跟 它 颜色 相近 
或 相同 的 颜色 ， 图 像 颜 色 反差 越 大 选取 的 范围 越 广 ， 容 差 越 大 
选取 的 范围 越 广 。 

@ “裁剪 " 工具 转 (C )， 可 以 通过 拖 动 选 框 ， 选 取 要 保留 的 范围 

并 进行 裁 切 , 选取 后 可 以 按 Enter 键 完 成 操作 , 取消 则 按 Esc 键 。 

“切片 ”工具 用 (K)， 用 来 制作 网 页 的 热 区 。 图 12-3 工具 箱 

“画笔 ” 工具 国 (B ):， 用 于 和 柔 边 、 描 边 的 绘制 。 

“仿制 图 章 ” 工 具 国 ( S ): 可 以 把 其 他 区 域 的 图 像 纹 理 轻易 地 复制 到 选 定 的 区 域 。 

“历史 记录 画笔 ”工具 国 (Y ): 用 于 恢复 图 像 的 操作 ， 可 以 一 步 一 步 地 恢复 ， 也 可 以 直接 

按 F12 键 全 部 恢复 。 

“橡皮 擦 ”工具 加 ( E ): 可 以 清除 像素 或 者 恢复 背景 色 。 

“渐变 ”工具 国 ( G ): 填充 渐变 颜色 。 

“模糊 ”工具 国 (R ): 模糊 图 像 。 

“ 减 淡 ”工具 辆 (0):， 使 图 像 变 亮 。 

“路 径 选择 ”工具 围 (A ): 选择 整个 路 径 。 

“ 横 排 文字 ”工具 国 (T): 在 图 像 上 创建 文字 。 

“钢笔 ”工具 国 (P ): 绘制 路 径 。 

“ 算 形 ”工具 国 (U): 绘制 矩形 . 

“注释 ”工具 国 (N): 添加 文字 注释 。 

“吸管 ”工具 图 (1): 选取 颜色 。 

“ 抓 手 ”工具 畏 (H): 在 图 像 窗 口内 移动 图 像 。 

“缩放 ”工具 国 (Z): 可 放大 和 缩小 图 像 的 视图 。 


12.1.3 ”工具 选项 栏 
使 用 Photoshop CC 绘制 或 处 理 图 像 时 ， 首 先 需要 在 工具 箱 中 选择 工具 ,然后 在 选项 栏 中 对 该 
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工具 进行 相应 的 设置 ， 如 图 12-4 所 示 是 【文本 】 工 具 的 选项 栏 。 


124 【文本 】 工 具 的 选项 栏 


12.1.4 浮动 面板 


在 默认 情况 下 ， 面 板 位 于 文档 窗口 的 右 侧 ， 其 主要 功能 是 查看 和 修改 图 像 。 一 些 面板 中 的 菜 
单 提供 其 他 命令 和 选项 ,可 使 用 多 种 不 同方 式 组 织 工作 区 中 的 面板 。 可 以 将 面板 存储 在 面板 箱 中 ， 
以 使 它们 不 干扰 工作 且 易 于 访问 ， 或 者 可 以 让 常用 面板 在 工作 区 中 保持 打开 。 另 一 个 选项 是 将 面 
板 编组 ， 或 将 一 个 面板 停放 在 另 一 个 面板 的 底部 ， 如 图 12-5 所 示 。 


图 12-5 浮动 面板 
12545 恒 文档 窗 罩 


图 像 文 件 窗口 就 是 显示 图 像 的 区 域 ， 也 是 编辑 和 处 理 图 像 的 区 域 。 在 图 像 窗口 中 可 以 实现 
Photoshop 中 所 有 的 功能 ， 也 可 以 对 图 像 窗 口 进行 多 种 操作 ， 如 改变 窗口 大 小 和 位 置 ， 对 窗口 进行 
缩放 等 。 文 档 窗口 如 图 12-6 所 示 。 


12-6 文档 窗口 
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12.2 ”图 像 的 调整 


在 Photoshop 中 调整 图 像 的 大 小 和 画布 的 大 小 是 经 常用 的 一 种 操作 ,本 节 将 讲述 这 些 基 本 操作 。 
12.2.1 小 实 侦 


[ 福 ] 
Ex 


图 像 大 小 包括 像素 大 小 和 文档 大 小 两 个 方面 ， 整 体 调 图 一 定 要 约束 比例 。 本 节 讲 述 调整 图 像 
的 大 小 ， 具 体操 作 步 又 如 下 。 
步骤 O01 启动 Photoshop CC， 执 行 “ 文 件 ”|“ 打 开 ” 命 令 ， 弹 出 “打开 ”对 话 框 ， 在 对 话 框 中 
选择 图 像 文 件 ， 如 图 12-7 所 示 。 
步骤 024 单 击 “ 打 开 ” 按 钮 ， 打 开 图 像 文 件 ， 如 图 12-8 所 示 。 


Ei 
12-7 “打开 ”对 话 框 图 12-8 打开 图 像 文件 


步骤 034 执行 “图 像 ”|“ 图 像 大 小 ”命令 ， 弹 出 “图 像 大 小 ”对 话 框 ， 交 图像“ 高度” 设置 为 
500，“ 和 宽度 ”自动 修改 为 529， 如 图 12-9 所 示 。 
步 又 044 单 击 “ 确 定 ”按钮 ， 即 可 缩小 图 像 ， 如 图 12-10 所 示 。 
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图 12-9 “图 像 大 小 ”对 话 框 图 12-10 缩小 图 像 
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太 知识 要 点 六 
如 果 在 弹出 的 “图 像 大 小 ”对 话 框 中 ， 把 约束 比例 前 面 的 对 号 取消 控 ， 再 设置 文档 的 宽度 和 长 度 时 就 
不 再 受 比例 的 约束 。 
12.2.2 小 实例 一 一 调整 画布 大 小 
调整 画布 大 小 是 图 像 不 变 ， 但 是 画布 的 尺寸 有 所 调整 。 本 节 讲 述 调整 画布 的 大 小 ， 具 体操 作 


步骤 如 下 。 

步 又 014 启动 Photoshop CC， 执 行 “ 文 件 ” |“ 打开 ”命令 ， 弹 出 “打开 ”对 话 框 ， 打 开 图 像 文 
件 “画布 大 小 jpg”， 如 图 12-11 所 示 。 

步 双 024 执行 “图 像 ”|“ 画 布 大 小 ”命令 ， 弹 出 “画布 大 小 ”对 话 框 ， 将 图 像 “高 度 ”设置 为 
500，“ 宽 度 ” 设 置 为 700， 如 图 12-12 所 示 。 


画布 大 小 | 

当前 大 小 : 703.1K 
宽度 : 600 像素 Ee 
高 度 : 400 像素 


新 奸 大 小 : 1.00M 
高度 (H): 500 像素 v 
] 相 RH(R) 
定位: [| 个 | 万 


oe 


所 


ppNAART 


写 
坪 
沪 
Fs 
.上 
9 
a 
bd 


Be 
四 


画布 扩展 芯 色 : 背景 v 


图 12-11 打开 图 像 文 件 图 12-12 “画布 大 小 ”对 话 框 
步骤 034 单 击 “ 确 定 ”按钮 ， 即 可 将 画布 的 上 下 增加 100 像素 ， 如 图 12-13 所 示 。 


jp 国 呈 记 国 MA ANY 
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图 12-13 扩大 画布 大 小 
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12.3 ”设置 前 景色 和 背景 色 


在 Photoshop CC 中 ， 默 认 的 前 景色 为 黑色 、 背 景色 为 白色 。 当 设置 了 其 他 颜色 后 ， 要 恢复 默 
认 的 颜色 ， 只 需 单 击 工具 箱 中 的 默认 前 景色 和 背景 色 按钮 ， 如 图 12-14 所 示 。 


图 12-14 单 击 按钮 
12.3.1 默认 的 前 景色 与 背景 色 


前 景色 : 用 于 显示 和 选取 当前 绘图 工具 所 使 用 的 颜色 。 单 击 “ 前 景色 ”按钮 ， 可 以 打开 “ 拾 
色 器 ”对 话 框 并 从 中 选取 颜色 ， 如 图 12-15 所 示 。 

背景 色 : 用 于 显示 和 选取 图 像 的 底 色 。 选 取 背 景色 后 ， 并 不 会 改变 图 像 的 背景 色 ， 只 有 在 使 
用 与 背景 色 有 关 的 工具 时 才 会 依照 背景 色 的 设置 来 执行 命令 。 单 击 “ 背 景色 ”按钮 ， 可 以 打开 “ 拾 
色 器 ”对 话 框 并 从 中 选取 颜色 ， 如 图 12-16 所 示 。 

切换 前 景色 与 背景 色 辆 :用 于 切换 前 景色 和 背景 色 。 

默认 前 景色 与 背景 色 圆 : 用 于 恢复 前 景色 和 背景 色 为 初始 默认 颜色 ， 即 100% 黑 色 与 白色 。 

默认 的 前 景色 是 黑色 ， 默 认 的 背景 色 是 白色 。 但 在 Alpha 通道 中 ， 默 认 前 景色 是 白色 ,默认 


层 . 了 Eg 
背景 色 是 黑色 。 
扩 色 妖 (前 景色 ) Lx [x 
新 的 确定 | 
取 肖 加 消 
添加 5 色 板 添加 到 色 板 
当前 E33 新 色 床 
@H: 0 度 LE 0 度 OL: 100 
swoa % Oa 0 
Blo % Ob: | % Ob; 0 
R cl |% co |% 
cn 中 可]% M0 w 
由 Kel 可 wl |% wo |% 
口 R 有 Web 声色 新 0 | 口 R 有 web 颜色 #| Ko0 |% 
图 12-15 前 景色 图 12-16 背景 色 


12.3.2 更改 和 恢复 前 景色 与 背景 色 


本 节 讲 述 如 何 更 改 和 恢复 前 景色 和 背景 色 ， 有 具体 操作 步骤 如 下 。 


步骤 01 启动 Photoshop CC， 打 开 图像 文 件 “ 背 景色 jpg”， 如 图 12-17 所 示 。 
步骤 02 选择 工具 箱 中 的 “ 魔 棒 ” 工 具 ， 在 窗口 中 单 击 选择 选区 ， 如 图 12-18 所 示 。 
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图 12-17 打开 图 像 图 12-18 选择 选 

步骤 034 单 击 选择 工具 箱 中 的 “前 景色 ”按钮 ， 弹 出 “ 拾 色 器 (前 景色 ) ”对 话 框 ， 选 择 要 设 
置 的 前 景 颜 色 ， 如 图 12-19 所 示 。 

步骤 044 按键 盘 中 的 CtrlHDelete 键 即 可 填充 背景 颜色 ， 如 图 12-20 所 示 。 


Xl 


瓜 色 器 (前 景色 ) S 到 


mm = 
| 严 
晶 me 


当前 六 诛 

@H: 162 | 度 L 171 

s: [io0 |% Ox [15 
R: |175 Cl41 |% 
IOG: [ia M:l22 |% 
图 os 5 lio0 |% 


] 只 有 Web 颜色 #|atb500 So I% 


图 12-19 设置 前 景 颜色 图 12-20 填充 背景 颜色 


步 最 054 在 工具 箱 中 单 击 “ 切 换 前 景色 和 背景 色 ” 按 钮 ， 即 可 快速 更 改 前 景色 和 背景 色 ， 如 
12-21 所 示 。 


| 


图 12-21 快速 更 改 前 景色 和 背景 色 
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12.4 ”创建 选择 区 域 


如 何 快速 、 精 确 地 选取 图 像 十 分 重要 ， 这 就 要 求 掌握 好 各 种 选择 工具 的 使 用 方法 ， 使 图 像 选 
取 尽 可 能 精确 、 合 适 ， 为 以 后 的 各 种 操作 提供 方便 。 


12.4.1 选 框 工具 


Photoshop 的 选 框 工具 内 含 4 个 工具 ， 分 别 是 矩形 选 框 工 具 、 


。 世 ;矩形 选 框 工 。M 


椭圆 选 框 工 具 、 单 行 选 框 工 具 、 单 列 选 框 工 具 。 如 图 12-22 所 示 就 二 图 选 框 具 M 
RE =- 单行 选 框 工具 
是 选 框 工具 。 _ 好 。 ;单列 选 框 工具 

使 用 矩形 选 框 工具 ， 在 图 像 中 确认 要 选择 的 范围 ， 按 住 鼠标 


左 键 不 放 拖 动 鼠 标 , 即 可 选 出 要 选取 的 选区 ,如 图 12-23 所 示 。 椭 12-22 选 框 工具 
选 框 工具 的 使 用 方法 与 矩形 选 框 工具 的 使 用 方法 相同 ， 如 图 12-24 所 示 。 


图 12-23 ”和 矩形 选 框 工具 图 12-24 ”椭圆 选 框 工具 
12.4.2” 套 索 工 具 


Photoshop 的 套 索 工具 内 含 3 个 工具 ， 分 别 是 套 索 工具 、 多 边 形 套 索 工 具 、 磁 性 套 索 工具 。 
套 索 工具 是 最 基本 的 选区 工具 ， 在 处 理 图 像 中 起 着 很 重要 的 作用 。 套 索 工具 的 快捷 键 是 字母 L。 
如 图 12-25 所 示 为 套 索 工具 。 

套 索 工具 组 里 的 第 一 个 套 索 工 具 用 于 选择 任意 不 规则 选区 ， 套 索 工具 组 里 的 多 边 形 套 索 工 具 
用 于 选择 有 一 定 规则 的 选区 ， 而 套 索 工具 组 里 的 磁性 套 索 工 具 是 制作 边缘 比较 清晰 ， 且 与 背景 颜 
色相 差 比较 大 的 图 片 的 选区 。 在 使 用 的 时 候 注意 其 属性 栏 的 设置 。 如 图 12-26 所 示 为 套 索 工具 选 


羽化 : 0 像素 Y 湖 纤 是 占 


图 12-25 套 索 工具 图 12-26 套 索 工具 选项 栏 
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@ 羽化 : 取 值 范围 在 0~250 像素 之 间 ， 可 羽化 选区 的 边缘 ， 数 值 越 大 ， 羽 化 的 边缘 越 大 。 
@ 消除 锯齿 : 该 功能 是 让 选区 更 平滑 。 


12.4.3 ” 魔 棒 工具 


Photoshop 的 魔 棒 工 具 ， 是 一 个 选区 工具 ， 其 选择 范围 的 多 少 取决 于 其 工具 选项 栏 中 容 差 值 
的 高 低 。 容 差 值 高 ,选择 的 范围 就 大 ; 容 差 值 低 ， 选 择 的 范围 就 小 。 魔 棒 工 具 的 快捷 键 是 字母 W。 
如 图 12-27 所 示 为 魔 棒 工具 。 魔 棒 工 具 选 项 栏 ， 如 图 12-28 所 示 。 


痊 2 快速 选择 工具 Ww 


EE 产 、 魔 棒 工 具 W 加 用 让 册 了 2 了 ET 

图 12-27 魔 棒 工 具 图 12-28 魔 棒 工具 选项 栏 

新 选区 国 : 可 以 创建 一 个 新 的 选区 。 

添加 到 选区 国 ， 在 原 有 选区 的 基础 上 ， 继 续 增加 一 个 选区 ， 也 就 是 将 原 选区 扩大 。 

从 选区 减 去 国 : 在 原 选区 的 基础 上 剪 掉 一 部 分 选区 。 

与 选区 交 又 国 ， 执行 的 结果 ， 就 是 得 到 两 个 选区 相交 的 部 分 。 

容 差 : 确定 魔 棒 工 具 的 选择 范围 ， 数值 越 高 ,选择 的 范围 就 越 大 ; 反之 , 选择 的 范围 就 小 。 
消除 锯齿 ， 消 除 边缘 的 锯齿 ， 使 选择 范围 边缘 光滑 。 

连续 : 只 选择 使 用 相同 颜色 的 邻近 区 域 。 

对 所 有 图 层 取样 : 使 用 所 有 可 见 图 层 中 的 数据 选择 颜色 。 否 则 ， 魔 棒 工 具 将 只 从 现 有 图 层 
中 选择 颜色 。 


12.4.4 ”小 实例 一 一 制作 透明 图 像 


透明 图 像 应 用 广泛 ， 利 用 选择 工具 抠 取 透明 图 像 效 果 如 图 12-29 所 示 ， 有 具体 操作 步骤 如 下 。 
步 又 014 打开 图 像 文 件 ， 选 择 工具 箱 中 的 “ 魔 棒 ” 工 具 ， 如 图 12-30 所 示 。 


CREATE 
Se ES 


图 12-29 透明 图 像 效 果 12-30 打开 图 像 文件 
步 野 024 在 窗口 中 空白 处 单 击 选择 区 域 ， 如 图 12-31 所 示 。 
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图 12-31 选择 区 域 
步骤 034 按 住 键盘 中 的 Shift 键 ， 在 花 以 外 的 区 域 继续 多 次 单 击 选择 区 域 ， 如 图 12-32 所 示 。 


FEET 引 ;2 对 有 图 导电 笠 


sd EAA 


图 12-32 ”选择 区 域 
步骤 044 在 “图 层 ” 面 板 中 单 击 “ 背 景 ”图 层 ， 弹 出 “新 建 图 层 ” 对 话 框 ， 如 图 12-33 所 示 。 单 


击 “确定 ”按钮 ， 即 可 将 其 转换 为 图 层 0。 


一色 (C): [x 无 
模式 (M): 正常 Y 不通 明度 (0}: 100|，% 


图 12-33 “新 建 图 层 ” 对 话 框 
步骤 05 按键 盘 中 的 Ctrl+Delete 键 删除 背景 ， 如 图 12-34 所 示 。 
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图 12-34 ”删除 背景 


使 用 Photoshop 绘制 与 修饰 网 页 图 像 


步 野 064 执行 “文件 ”|“ 存 储 为 Web 所 用 格式 ”命令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 话 框 ， 


如 图 12-35 所 示 。 


wn Web MORE OON] 


ET 


地 | 
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图 12-35 


TH 和 = 5 
站 Bag -本 区 
了 > tam 
mm 了 了 
可 ae 。 阳 
a se 
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na 通 


“存储 为 Web 所 用 格式 ”对 话 框 


步骤 074 单 击 “ 存 储 ” 按钮 , 弹出 “将 优化 结果 存储 为 ”对 话 框 , 将 “文件 名 ”设置 为 “透明 .gif" ， 
如 图 12-36 所 示 。 单 击 “ 保 存 ” 按 钮 即 可 保存 透明 图 像 。 


将 优化 至 浴 存 全 为 [2 
人 在 6): 下 下 ~ ©F 0 
Re SRE 
p> 
Sane 
于 
= 
Ww 
= 
Ee 文件 各 加 of 人 加 
入 Miss Ez 
EE i 
图 12-36 “将 优化 结果 存储 为 ”对 话 框 
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12.5 ”基本 绘图 工具 


在 处 理 网 页 图 像 过 程 中 ， 绘 图 是 最 基本 的 操作 。 本 节 将 讲述 在 Photoshop 中 ， 面 笔 、 铅 笔 、 
减 淡 和 加 深 工 具 的 应 用 。 


12.5.1 画笔 工具 


画笔 工具 是 绘图 工具 中 最 为 常用 的 工具 之 一 ， 只 要 设置 好 所 需 的 颜色 、 笔 刷 大 小 、 形 状 、 压 
力 参 数 ， 就 可 以 直接 使 用 鼠标 在 页 面 中 进行 绘画 。 具 体操 作 步 又 如 下 。 
步 又 014 打开 图 像 文件 ， 选 择 工具 箱 中 的 “画笔 ”工具 ， 如 图 12-37 所 示 。 
步骤 024 在 选项 栏 中 单 击 “ 点 按 可 打开 画笔 预 设 选取 器 ”按钮 ， 在 弹出 的 列表 合适 的 画笔 ， 如 
图 12-38 所 示 。 


pr 1 


模式 : 项 沉 


大 让 95 像素 


ET 


Am 司 NA\Nny 


本 


12-37 打开 图 像 文 件 图 12-38 ”选择 画笔 
步骤 034 在 窗口 中 按 住 鼠 标 左 键 在 窗口 中 绘制 ， 效 果 如 图 12-39 所 示 。 


# 兴 


5 NPNAD 
J 国宝 四 NN 和 AAAT 


] 
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12-39 ”画笔 绘制 
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12.5.2 ”铅笔 工具 


本 节 将 重点 讲述 铅笔 工具 的 使 用 ， 有 具体 步骤 如 下 。 
步骤 014 打开 图 像 文件 ， 选 择 工具 箱 中 的 “铅笔 ”工具 ， 如 图 12-40 所 示 。 
步骤 024 在 选项 栏 中 单 击 “ 点 按 可 打开 画笔 预 设 选取 器 ”按钮 ， 在 弹出 的 列表 中 选择 合适 的 铅 
笔 ， 如 图 12-41 所 示 。 


3 3 Te 


图 12-40 ”打开 图 像 文 件 图 12-41 选择 铅笔 
步骤 034 在 窗口 中 按 住 鼠 标 左 键 ， 在 窗口 中 绘制 形状 效果 如 图 12-42 所 示 。 


图 12-42 ”绘制 形状 效果 


12.5.3 ” 减 淡 和 加 深 工具 的 应 用 


减 淡 工 具 的 主要 作用 是 改变 图 像 的 曝光 度 。 对 图 像 中 局 部 曝光 不 足 的 区 域 , 使 用 减 淡 工具 后 ， 
可 对 该 局 部 区 域 的 图 像 增 加 明亮 度 (稍微 变 白 ), 使 很 多 图 像 的 细节 可 以 显现 出 来 。 加 深 工 具 的 作 
用 与 减 淡 工具 的 作用 相反 。 具 体操 作 步 骤 如 下 。 
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步骤 014 打开 图 像 文件 ， 选 择 工具 箱 中 的 “ 减 淡 ” 工 具 ， 如 图 12-43 所 示 。 
步骤 02 在 窗口 中 按 住 鼠 标 左 键 涂 抹 ， 即 可 对 图 像 进行 减 淡 ， 效 果 如 图 12-44 所 示 。 


入 - 日 se ES ts xox 同 of fm 过 
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图 12-43 打开 图 像 文件 图 12-44” 减 淡 效 果 
步骤 034 选择 工具 箱 中 的 “加 深 ”工具 ， 在 窗口 中 按 住 鼠标 左 键 涂抹 ， 即 可 对 图 像 进行 加 深 ， 
效果 如 图 12-45 所 示 。 


-20m mm et xv od veras 过 
ap € 100RGYED* ~ 


了 


和 NO 
PIJ9ENN A 


6 
时 


图 12-45 加深 效果 


12.6 ”综合 实战 一 一 创建 基本 文本 网 页 实例 


本 章 主要 讲述 了 Photoshop 的 基础 知识 ， 下 面 通过 实例 讲述 如 何 制作 一 个 房产 网 站 logo， 效 
果 如 图 12-46 所 示 ， 具 体操 作 步 又 如 下 。 
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图 12-46 房产 网 站 logo 效果 

最 终 文件 ， 最 终 文件 /12/ 网 站 10go .psd 
步骤 01 启动 Photoshop CC 软件 ， 执 行 “ 文 件 ”| “新建” 命令， 弹出 “新 建 ”对 话 框 ， 将 “ 宽 
度 ” 设 置 为 500，“ 高 度 ” 设 置 为 400， 如 图 12-47 所 示 。 
步骤 024 单 击 “ 确 定 ”按钮 ， 新 建 一 个 空白 文档 ， 如 图 12-48 所 示 。 


怖 村 


新 轩 Ea 
名 称 (IN): 未 标 短 -1 全 十 
祖 i8(p): 自 定 号 取消 
存 峙 祯 设 (5)， 
额度 (W):| 500 者 素 时 册 4 
高 褒 (H): 400 像素 v 
分 汰 它 (R); 72 篇 素 / 英 寺 vv 
新 色 醋 式 {M): RG6B 前 色 。 v | 8 位 
冰 录 内 容 (C): 白色 医 信 大 小 
妆 高 如 585.9K 
图 12-47 “新 建 ” 对 话 框 图 12-48 ”新 建 空白 文档 


步骤 034 选择 工具 箱 中 的 “渐变 工具 ”， 在 选项 栏 中 单 击 “ 点 按 可 编辑 渐变 ”按钮 ， 弹 出 “ 渐 
变 编 辑 器 ”对 话 框 ， 设 置 渐变 颜色 ， 如 图 12-49 所 示 。 

步骤 044 单 击 “ 确 定 ”按钮 ， 设 置 渐变 颜色 ， 在 选项 栏 中 将 “不 透明 度 ” 设 置 为 30%， 在 窗口 
中 从 上 向 下 拖 动 填充 渐变 ， 如 图 12-50 所 示 。 
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ES - 5° 
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Ls 
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图 12-49 设置 渐变 颜色 图 12-50 填充 渐变 


步骤 054 选择 工具 箱 中 的 “画笔 ”工具 ， 在 选项 栏 中 单 击 “ 点 按 可 打开 画笔 预 设 选取 器 ”按钮 ， 
弹出 画笔 对 话 框 选择 需要 的 画笔 ， 如 图 12-51 所 示 。 
步骤 064 在 窗口 的 底部 单 击 绘制 形状 ， 如 图 12-52 所 示 。 
”mm 如 交 t: 司 和 司 不 gE 度 : Dox 同 ef 漂 : oox 辐 of 
未 标 要 1@ 100% ( 若 景 RG3/8)* ~ 
M 模式 : 三 尖 


大 小: 全 134 借 素 


图 12-51 选择 画笔 图 12-52 ”绘制 形状 


步 又 07 4 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 选项 栏 中 设置 字体 样式 和 字体 大 小 ， 在 窗口 中 
输入 文字 “水 榭 华 庭 ”， 如 图 12-53 所 示 。 

步骤 084 执行 “图 层 ”|“ 图 层 样式 ”| “混合 选项 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 单 击 右边 
的 “样式 ”选项 ， 在 弹出 的 列表 中 选择 合适 的 样式 ， 如 图 12-54 所 示 。 
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图 12-53 输入 文字 图 12-54 “图 层 样 式 ” 对 话 框 


步骤 09 4 单 击 “确定 ”按钮 ， 设 置 图 层 样式 效果 ， 如 图 12-55 所 示 。 
步骤 104 打开 “图 层 ” 面 板 ， 选 择 文本 图 层 右 击 鼠标 ， 在 弹出 的 快捷 菜单 中 选择 “ 栅 格 化 文字 ? 
命令 ， 即 可 栅 格 化 文字 ， 如 图 12-56 所 示 。 


J 混合 还 项 
复制 CSS 
复制 图 层 .。 
杂 除 图 层 


4 


转 接 为 智能 对 象 


创建 工作 路 径 
转换 为 形状 


7 aNhkey HD 
| 
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[| 
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锐利 
显 利 
翅 厚 
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图 12-55 设置 图 层 样式 效果 12-56 ”选择 “ 栅 格 化 文字 ”命令 


步骤 114 执行 “编辑 ”|“ 变 换 ”|“ 变 形 ” 命 令 ， 在 窗口 中 拖 动 节点 ， 对 文字 进行 变形 ， 效 果 如 
图 12-57 所 示 。 
步 又 12 4 按键 盘 中 的 Ctrl+Enter 键 即 可 实现 对 文字 的 变形 效果 。 执 行 “ 文 件 ” |“ 存 储 ” 命 令 ， 
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图 12-57 变形 文字 效果 
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设计 网 页 中 的 特效 文字 


本 章 导读 


文字 在 网 页 图 像 处 理 中 起 着 非常 重要 的 作用 。 Photoshop CC 具有 文字 编辑 和 强大 的 文字 处 
理 功 能 ， 能 够 满足 网 页 特效 文字 设计 的 需要 。 本 章 主要 介绍 网 页 中 各 种 特效 文字 的 设计 方法 。 

@ 使 用 文字 工具 

@ Photoshop 图 层 基 本 操作 

@ 设计 常见 的 网 页 特效 文字 


感谢 有 您 .… 


浮雕 文本 
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13.1 使 用 文字 工具 


在 Photoshop 中 ,“ 文 字 ” 工 具 包括 “ 横 排 文字 ”“ 直 排 文字 ”““ 横 排 文字 蒙 版 ”和 “ 直 排 文 
字 蒙 版 "要 选取 该 工具 ， 可 以 单 击 相应 的 工具 按钮 ， 如 图 13-1 所 示 。 可 以 对 文本 进行 更 多 的 设 
置 ， 如 实现 在 输入 文本 时 自动 换行 ， 可 以 将 文本 转换 为 路 径 等 。 


， 本 构 排 文字 工具 NR ha 
JIT 直 排 文字 工具 T 


横 排 文字 蒙 版 了 具 
直 排 文字 蒙 版 具 T 


图 13-1 “文字 ”工具 
13.1.1 小 实例 一 一 文字 的 输入 


本 节 通 过 实例 讲述 文字 的 输入 ， 有 具体 操作 步骤 如 下 。 


步骤 014 打开 图 像 文 件 ， 选 择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 如 图 13-2 所 示 。 
步骤 024 在 窗口 中 空白 处 单 击 并 输入 文字 “精美 礼物 ”， 如 图 13-3 所 示 。 


MN 三 特 


图 13-2 ”打开 图 像 文件 图 13-3 输入 文字 
13.1.2 小 实例 一 一 设置 文字 属性 
输入 文字 后 ， 当 对 文字 的 字体 或 颜色 不 满意 的 时 候 ， 可 以 对 文字 进行 相应 的 参数 设置 。 具 体 
操作 步骤 如 下 。 


步骤 014 将 光标 放置 在 文字 的 右边 ， 从 左 向 右 拖 动 选中 文字 ， 如 图 13-4 所 示 。 
步骤 024 单 击 字体 右边 的 下 拉 按 钮 ， 在 弹出 的 列表 中 选择 字体 “黑体 ”， 如 图 13-5 所 示 。 
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了 月 国外 四 名和 入 六 了 了 


134 ”选中 文字 图 13-5 选择 “黑体 ” 


步 野 034 单 击 字体 大 小 右边 的 下 拉 按钮 ， 在 弹出 的 列表 中 选择 18 点， 如 图 13-6 所 示 。 
步 又 044 单 击 “ 设 置 消 除 锯齿 方法 ”按钮 ， 在 弹出 的 列表 中 选择 “浑厚 ”选项 ， 如 图 13-7 所 示 。 


图 13-6 设置 字体 大 小 图 13-7 选择 “浑厚 ”选项 
步骤 054 在 选项 栏 中 单 击 颜色 按钮 ， 弹 出 “ 拾 色 器 (文本 颜色 ) ”对 话 框 ， 单 击 选择 文本 颜色 ， 
如 图 13-8 所 示 。 
步 最 064 单 击 “ 确 定 ”按钮 ， 即 可 设置 文本 颜色 ， 如 图 13-9 所 示 。 


DH 
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13.1.3 “小 实例 一 一 文字 的 变形 


广告 宣传 等 经 常 看 到 一 些 变形 后 的 文字 ，Photoshop 中 文字 变形 大 概 可 以 通过 文字 变形 、 自 
由 变换 、 转 换 为 路 径 ， 然 后 加 工 变 形 。 单 击 “ 文 字 变形 ”按钮 之 后 ， 弹 出 “变形 文字 ”对 话 杠 ， 
在 样式 下 面 有 15 种 样式 供 选择 : 扇形 ， 下 弧 、 上 弧 、 拱 形 、 凸 起 ， 贝 过、 花冠 、 旗 帜 、 波 浪 、 鱼 
形 、 增 加 、 鱼 眼 、 膨 胀 、 挤 压 和 扭转 。 

下 面 通过 文字 变形 对 文本 进行 变形 ， 具 体操 作 步 骤 如 下 。 
步 又 014 选中 输入 的 文本 ， 单 击 选 项 栏 中 的 “创建 文字 变形 ”按钮 ， 如 图 13-10 所 示 。 
步骤 024 弹出 “变形 文字 ”对 话 框 ， 在 对 话 框 中 “样式 ”下 拉 列 表 中 选择 “上 弧 ” 选 项 ， 将 “ 弯 
曲 ” 设 置 为 50%， 如 图 13-11 所 示 。 


T 


A 
a 变形 文字 < 
男生 
人 EEC= pl 
Ps | 图 水 平 (H) ” 口 香 直 (V) 取消 
四 章 曲 (8): +50 |% 
碳 一 et 
水 平 扭曲 (0): 0 
委 直 扭曲 (E): 0 
图 13-10 选择 文本 图 13-11 “变形 文字 ”对 话 框 


图 13-12 所 示 。 
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图 13-12 设置 变形 文字 效果 
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13.2 ”Photoshop 图 层 基本 操作 


图 层 是 Photoshop CC 中 最 重要 的 功能 之 一 。 当 进行 图 像 粘贴 或 者 在 创建 文字 时 ,系统 会 自动 
为 粘贴 的 图 像 和 文字 创建 新 图 层 ， 也 可 以 直接 创建 新 图 层 。 


13.2.1 添加 图 层 
添加 图 层 是 编辑 图 层 中 首先 应 学 会 的 操作 ， 新 建 图 层 一 般 可 以 通过 “图 层 ”面板 或 图 层 菜单 
命令 来 添加 ， 新 添加 的 图 层 将 位 于 “图 层 ” 面 板 中 所 选 图 层 的 上 方 。 下 面 讲述 添加 图 层 的 具体 操 


作 步骤 如 下 。 
步骤 014 执行 “窗口 ”|“ 图 层 ” 命 令 ， 打 开 “ 图 层 ” 面 板 ， 如 图 13-13 所 示 。 
步骤 024 单 击 底部 的 “创建 新 图 层 ” 按 钮 卫 ， 即 可 新 建 图 层 1， 如 图 13-14 所 示 。 


EE 
RN soTun 


正常 半 不 本 明度 : 100% 轿 
锁定 : 图 A/ 中 日 填充 : 100% 同 


一 
- ma 
© 革 关 @ 


图 13-13 “图 层 ” 面 板 图 13-14 新建 图 层 1 


13.2.2 ”删除 图 层 


当 不 需要 图 层 时 ， 还 可 以 将 此 图 层 删 除 ， 具 体 方法 如 下 。 
步骤 01 选中 要 删除 的 图 层 3， 然 后 单 击 “ 图 层 ” 面 板 中 的 “删除 图 层 ” 按 钮 图 ， 如 图 13-15 所 示 。 
步骤 024 选择 底部 的 删除 按钮 后 ， 即 可 成 功 删除 图 层 3， 如 图 13-16 所 示 。 


口 © 局 合 


图 13-15 ” 单 击 “删除 图 层 ” 按 钮 


13-16 ”删除 图 层 3 
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13.2.3 ”合并 图 层 


在 一 幅 图 像 中 建立 的 图 层 越 多 ， 则 该 文件 所 占用 的 磁盘 空间 也 就 越 多 。 因 此 ， 对 一 些 不 必要 
分 开 的 图 层 ， 可 以 将 它们 合并 以 减少 文件 所 占用 的 磁盘 空间 ， 同 时 也 可 以 提高 操作 速度 。 

选中 要 合并 的 图 层 ， 在 “图 层 ” 面 板 中 右 击 鼠 标 ， 在 弹出 的 快捷 菜单 中 选择 其 中 的 合并 命令 
即 可 ， 如 图 13-17 所 示 。 

@ 向 下 合并 : 可 以 将 当前 作用 图 层 与 下 一 图 层 合并 为 一 个 作用 图 层 。 

@ 合并 可 见 图 层 : 可 以 将 当前 所 有 可 见 图 层 的 内 容 合并 到 背景 图 层 或 目标 图 层 中 ， 而 将 隐藏 

图 层 排列 到 合并 图 层 的 上 面 。 
@ 拼合 图 像 : 可 将 图 像 中 所 有 图 层 合 并 ， 并 在 合并 过 程 中 丢弃 隐藏 的 图 层 。 


图 13-17 选择 合并 命令 
13.2.4 ”设置 图 层 样式 


图 层 样式 效果 非常 丰富 ， 以 前 需要 用 很 多 步骤 制作 的 效果 在 这 里 设置 几 个 参数 就 可 以 轻松 完 
成 ， 图 层 的 样式 包含 了 许多 可 以 自动 应 用 到 图 层 中 的 效果 ,包括 投 影 、 发 光 、 斜 面 和 浮雕 、 描 边 、 
图 案 填充 等 效果 。 

图 层 样式 的 使 用 非常 简单 ， 只 要 按 以 下 方法 操作 即 可 。 

步 又 014 选中 应 用 样式 的 图 层 ， 执 行 “图 层 ”|“ 图 层 样式 ”|“ 混 合 选项 ”命令 ， 弹 出 “图 层 样 
式 ” 对 话 框 ， 在 对 话 框 中 设置 图 层 的 样式 ， 如 图 13-18 所 示 。 

步 又 024 选中 应 用 样式 的 图 层 ， 在 “图 层 ”面板 中 单 击 底部 的 “添加 图 层 样式 ”按钮 国 ， 如 图 
13-19 所 示 ， 在 弹出 的 菜单 中 选择 相应 的 样式 ， 弹 出 “图 层 样式 ”对 话 框 ， 即 可 进一步 
设置 图 层 样式 。 
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国民 RN Lx] 
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| | 
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混 杰 Ep): | 党 
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2 RO: SEE 
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口授 & 人 TREE 一 [0 | 
口内 明 时 i: Tet) 区 cg CoO) 国 
口 由 帮 光 Ni 无 ~ 
口 尖 条 Ca 
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口 权 芝 要 加 和) 
口 庆 光 
De 汪 W 抽 cl:| 友 v 
#0 5 
* 
下 -BEE，。 2 
a 
图 13-18 “图 层 样式 ”对 话 框 图 13-19 “图 层 ”面板 
1. 投影 


当 绘 制 的 图 像 与 背景 颜色 相近 时 ， 可 为 其 添加 投影 效果 来 将 两 者 颜色 区 分 开 。 添 加 投影 效果 
可 以 增强 图 像 的 立体 感 和 透视 效果 。 在 “图 层 样 式 ” 对 话 框 的 “样式 ”列表 中 选择 “投影 ”选项 ， 
如 图 13-20 所 示 。 
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Ob 
口 由 影 机 图 
口 册 发 光 
口 漆 个 素 
门 新 总 
ORE 有 四 

Ws: | | Crs 

口 sa 4 A 
口外 光 人 Nl: Ci 


屿 疼 丑 近 全 失 影 ) 
该 置 为 默认 值 。 揽 位 六 量 认 值 


图 13-20 “投影 ”选项 

在 “投影 ”选项 中 的 各 参数 如 下 。 

@ 混合 模式 : 在 下 拉 列 表 中 可 指定 所 加 阴影 与 原 图 层 图 像 合成 的 模式 ， 单 击 该 选项 后 面 的 闫 
色 图 标 ， 在 弹出 的 “选择 阴影 颜色 ”对 话 框 中 可 以 设置 阴影 的 颜色 。 

@ 不 透明 度 : 用 于 设置 阴影 的 不 透明 度 。 

@ 角度 : 用 于 设置 产生 阴影 辉 光 的 入 射 角度 ， 可 以 拖 动 指 针 旋 转 来 设置 角度 ， 也 可 以 直接 在 
右 侧 的 数值 框 中 输入 角度 数值 。 

@ 使 用 全 局 光 : 勾 选 此 复 选 框 ， 表示 对 图 像 的 图 层 效 果 设 置 相同 的 光线 照射 效果 。 

@ 距离 : 用 于 设置 投影 的 偏 移 量 、 值 越 大 ， 投 影 偏 移 效果 明显 。 
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扩展 : 用 于 设置 阴影 的 扩散 程度 。 

大 小 : 用 于 设置 阴影 的 模糊 程度 ， 数 值 越 大 ， 图 像 的 阴影 就 越 模 糊 。 
品质 : 用 于 设置 阴影 的 轮廓 形状 ， 可 以 在 “等 高 线 ” 下 拉 列 表 中 进行 选择 。 
消除 锯齿 : 久 选 该 复 选 框 ， 用 于 设置 阴影 的 边缘 是 否 具有 抗 锯齿 波 的 效果 
杂 色 : 用 于 设置 是 否 使 用 噪声 点 来 对 阴影 进行 填充 。 

图 层 挖 室 投 影 : 控制 投影 在 半 透 明 图 层 中 的 可 视 化 和 闭合 。 


2. 内 阴影 


内 阴影 样式 可 以 产生 凹凸 效果 ， 在 “图 层 样式 ”对 话 框 中 的 “样式 ”列表 中 选择 “内 阴影 ” 
选项 ， 如 图 13-21 所 示 。 


图 层 样式 Lx] 
本 上 [Es ”| 
| 混 模 式 人 : 
CR 本 四 
口 等 训 7 用 ok es |% 冯 各 和 式 (W) 
3m 
口 折 时 角度 Al: ( 20 度 回合 用 全 局 光 G 2 
一 0: 本 国 
ee 几 守 (0: = 
Dy KS} 一 一 一 一 [5 | 从 系 
口 志 二 加 呈 硕 
es Sis: [A] Ca 
口 4 三 光 hEN: oC———————— | 器 
Dy E70] 


图 13-21 “内 阴影 ”选项 
在 “内 阴影 ”选项 中 的 各 参数 如 下 。 
@ 角度 : 调整 内 侧 阴影 的 方向 ， 也 就 是 和 光源 相反 的 方向 ， 圆 圈 中 的 指针 指向 阴影 的 方向 。 
@ 距离 : 用 来 设置 阴影 在 对 象 内 部 的 偏 移 距离 ， 数 值 越 大 ， 光 源 的 偏离 程度 越 大 ， 偏 移 方向 
由 角度 决定 。 
@ 大 小 : 设置 阴影 的 延伸 范围 ， 数 值 越 大 ,光源 的 散射 程度 越 大 ， 相 应 的 阴影 范围 也 会 越 大 。 
@ 阻塞 : 设置 阴影 边缘 的 渐变 程度 。 
@ 等 高 线 : 用 来 设置 阴影 内 部 的 光环 效果 。 
3. 外 发 光 


外 发 光 可 添加 一 个 任意 颜色 的 光 围绕 在 图 像 元 素 的 边缘 之 外 。 在 “图 层 样式 对 话 框 中 的 “ 样 
式 ” 列 表 中 选择 “外 发 光 ” 选 项 ， 如 图 13-22 所 示 。 
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图 忆 拉 式 
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图 13-22 “外 发 光 ” 选 项 

在 “外 发 光 ” 选 项 中 的 各 参数 如 下 。 

@ 混合 模式 : 外 侧 发 光 层 如 同 在 层 的 下 面 多 出 了 一 个 层 ， 因 此 这 里 设置 的 混合 模式 将 影响 这 
个 虚拟 的 层 和 下 面 的 层 之 间 的 混合 关系 。 

@ 不 透明 度 : 光芒 一 般 是 透明 的 ， 因 此 这 个 选项 要 设置 小 于 100% 的 值 。 光 线 越 强 ， 应 当 将 
其 不 透明 度 设 置 得 越 大 。 

@ 杂 色 : 用 来 为 光芒 部 分 添加 随机 的 透明 点 。 

@ 方法 : 包括 “柔和 ”和 “精确 ”两 个 值 , “柔和 ”的 边缘 变化 比较 清晰 ， 而 “精确 ”的 边 
缘 变 化 比较 模糊 ， 因 而 看 起 来 似乎 更 好 ， 可 以 用 于 一 些 发 光 较 强 的 对 象 ， 或 者 棱角 分 明 、 
反光 效果 比较 明显 的 对 象 。 

@ 扩展 : 即 边缘 向 外 边 扩展 ， 与 前 面 提 到 的 阴影 中 的 “扩展 ”选项 的 用 法 类 似 。 

@ 大 小 : 控制 阴影 范围 的 大 小 ， 它 的 变化 范围 是 0~250 像素 ， 不 过 其 最 终 的 效果 和 颜色 渐变 
的 设置 是 相关 的 。 

@ 范围 : 用 来 设置 等 高 线 运用 的 范围 ， 其 数值 越 大 ， 效 果 越 不 明显 。 

@ 抖动 : 控制 光 的 渐变 ， 数 值 越 大 ， 图 层 阴 影 的 效果 越 不 清楚 ， 并 且 变 成 有 嗓音 的 效果 。 数 
值 越 小 ， 就 会 越 接 近 清 楚 的 阴影 效果 。 

4. 内 发 光 

添加 了 “内 发 光 ” 样 式 的 层 上 方 会 多 出 一 个 虚拟 的 层 ， 这 个 层 由 半 透 明 的 颜色 填充 ， 沿 着 下 

面 层 的 边缘 分 布 。 在 “图 层 样式 ”对 话 框 中 的 “样式 ”列表 中 选择 “内 发 光 ” 选 项 ， 如 图 13-23 
所 示 。 内 发 光 的 设置 方法 与 外 发 光 基 本 类 似 。 
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图 13-23 “内 发 光 ” 选 项 
5. 斜面 和 浮雕 
“和 斜面 和 浮雕 ”包括 “内 斜面 “外 斜面 “ 浮 惧 效果 ”“ 枕 状 浮 膨 ” 和 “ 描 边 浮雕 ”5 个 选 
项 ， 虽 然 每 一 项 中 包含 的 设置 选项 都 是 一 样 的， 但 是 制作 出 来 的 效果 却 有 天 壤 之 别 。 在 “图 层 样 
式 ” 对 话 框 的 “样式 ”列表 中 选择 “和 斜面 和 浮雕 ”选项 ， 如 图 13-24 所 示 。 
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图 13-24 “斜面 和 浮雕 ”选项 
在 “和 斜面 和 浮雕 ”选项 中 的 各 参数 如 下 。 
@ 样式 : 用 于 设置 针 面 和 浮雕 的 样式 。 
@ 方法 : 其 下 拉 列 表 中 包括 “平滑 ”、“ 有 雕刻 柔和 ”和 “有 雕刻 清晰 ”3 个 选项 。 
> 平滑 : 边缘 过 渡 比 较 柔 和 ， 也 就 是 它 得 到 的 阴影 的 边缘 变化 不 尖锐 。 
> 有 雕刻 柔和 : 产生 边缘 变化 明显 的 效果 , 比 起 “平滑 ”来 ， 它 产生 的 效果 立体 感 特别 强 。 
> 雕刻 清晰 : 与 雕刻 柔和 类 似 ， 但 是 它 的 边缘 的 色彩 变化 要 稍微 柔和 一 点 。 
@ 深度 : 控制 颜色 的 深度 ， 其 数值 越 大 ， 则 得 到 的 阴影 颜色 越 深 。 反 之 ， 得 到 的 阴影 颜色 越 浅 。 
@ 角度 : 不 仅 能 够 反映 光源 方位 的 变化 ， 而 且 可 以 反映 光源 和 对 象 所 在 平面 形成 的 角度 ， 这 
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些 设置 既 可 以 通过 在 圆 中 拖 动 来 设置 ， 也 可 以 在 旁边 的 编辑 框 中 直接 输入 。 
高 度 : 设置 斜面 和 浮雕 的 高 度 。 
等 高 线 : “斜面 和 浮雕 ”中 的 等 高 线 容易 让 人 混淆 ， 除 了 在 对 话 框 右 侧 有 “等 高 线 ” 设 置 
外 ， 在 对 话 框 左 侧 也 有 “等 高 线 ”设置 。 其 实 仔细 比较 一 下 就 可 以 发 现 , 对话 框 右 侧 的 “等 
高 线 ” 是 “光泽 等 高 线 ”， 这 个 等 高 线 只 会 影响 “虚拟 ”的 高 光 层 和 阴影 层 。 而 对 话 框 左 
侧 的 等 高 线 则 是 用 来 为 对 象 本 身 赋 予 条 纹 状 效果 。 这 两 个 等 高 线 混合 使 用 的 时 候 经 常会 产 


生 一 些 让 人 不 太 好 琢磨 的 效果 。 “等 高 线 ” 选 项 如 图 13-25 所 示 。 


纹理 : 用 来 为 层 添 加 材质 ， 其 设置 比较 简单 。 首先 在 下 拉 列 表 中 选择 纹理 ， 然 后 对 纹理 的 
应 用 方式 进行 设置 。 “纹理 ”选项 如 图 13-26 所 示 。 
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6. 光泽 
光泽 是 光线 照射 下 的 反光 度 比 较 高 的 波浪 形 表面 显示 出 来 的 效果 , “光泽” 选项 如 图 13-27 


所 示 。 
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“等 高 线 ” 选 项 
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图 13-27 “光泽 ”选项 


在 “光泽 ”选项 中 的 各 参数 如 下 。 
不 透明 度 : 调整 混合 模式 中 图 层 的 不 透明 度 ， 设 置 值 越 大 ， 光 泽 越 明显 。 反 之 ， 光 泽 越 暗淡 。 
角度 : 光照 射 的 角度 ， 它 控制 着 阴影 所 在 的 方向 ， 阴 影 的 方向 和 它 的 方向 是 相反 的 。 

距离 : 它 的 数值 越 小 ， 在 图 像 上 表现 为 被 覆盖 的 区 域 越 大 。 即 距离 控制 着 阴影 的 距离 ， 它 


控制 着 效果 的 偏 移 。 
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确证 
时 消 


新 于 样式 (W).… 
MV) 


+100 % 


口 反 相 0) 加 与 下属 接 0 


“纹理 ”选项 


大 小 : 控制 实施 效果 的 范围 ， 范 围 越 大 的 话 ， 效 果 作 用 的 区 域 越 大 。 
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7. 颜色 叠加 


颜色 释 加 是 将 颜色 当 作 一 个 图 层 ， 然 后 对 这 个 图 层 添加 一 些 效果 或 者 混合 模式 ， 就 得 到 颜色 
合 加 效果 。“ 颜 色 释 加 ”选项 如 图 13-28 所 示 。 


图 层 样式 
下 
rr" 混合 模式 E): 正常 | 
口 等 高 线 不 通明 度 (0): mll0 |% 新 建 样式 (W)..… 
口 绞 理 FE 回 坑 (V) 
的 设 村 XiR 值 | [页 们 2EV 值 
口内 阴影 圈 
口内 发 光 
i 
人 
口 图 家 要 加 
口外 发 光 
口 扫 
13-28 “颜色 县 加 ”选项 
8. 渐变 全 加 
在 “图 层 样式 ”对 话 框 的 “样式 ”列表 中 选择 “渐变 倒 加 ”选项 ， 如 图 13-29 所 示 。 
图 层 样式 > 
We 本 一 
混合 选项 :默认 了 耳光 
ET 混合 模式 (oj: 正常 v De 
口 守 二 不 通明 度 P): 一 [100 ”|% So).. 
口 纹 香 Hx: E17] Rm) AV) 
口 指 边 样式 0): 线性 Y 回 与 图 民 挤 四 
es 角度 00: (人 50 一度 国 
口 光泽 和 一] 
i | | RA 
口 枚 康 儿 加 
口外 发 光 
口 投影 


13-29 “渐变 全 加 ”选项 
在 “渐变 合 加 ”选项 中 的 各 参数 如 下 。 
@ 渐变 : 对 图 像 做 一 些 渐变 ， 久 选 “ 反 向 ” 复 选 框 表 示 将 渐变 的 方向 反 转 。 
@ 样式 : 用 于 设置 渐变 合 加 的 样式 ,其 下 拉 列 表 中 包括 “线性 ”、“ 径 向 ”、“ 角 度 ”、“ 对 称 的 ” 
和 “ 蓉 形 ”5 个 选项 。 
@ 角度 : 用 于 对 图 像 产生 的 渐变 登 加 效果 做 一 些 角度 变化 。 
@ 缩放 : 用 于 调整 产生 影响 区 域 的 大 小 。 
9. 图 案 又 加 


在 “图 层 样式 ”对 话 框 的 “样式 ”列表 中 选择 “图 案 登 加 ”选项 ， 它 具有 在 原来 的 图 像 上 加 
上 一 层 图 案 的 效果 ， 根 据 图 案 颜 色 的 深浅 ， 在 图 像 上 表现 为 雕刻 效果 的 深浅 。 在 使 有 中， 注意 调 
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第 13 章 


使 用 Photoshop CC 设计 网 页 中 的 特效 文字 


整 图 案 的 不 透明 度 ， 否 则 得 到 的 图 像 可 能 只 是 一 个 放大 的 图 案 ， 如 图 13-30 所 示 。 


em | 


"| 司 [SA 


MN): 0 % 


回 与 国民 氏 接 多 
设 于 为 & 认 值 要 位 为 黑 认 站 


13-30 
10. 描 边 


本 清 
EE 
YI) 


“图 案 且 加 ”选项 


在 “图 层 样式 ”对 话 框 的 “样式 ”列表 中 选择 “ 描 边 ”选项 ， 用 来 给 图 像 描 上 一 个 边框 ， 这 
个 边框 可 以 是 一 种 颜色 ， 也 可 以 是 渐变 ， 还 可 以 是 一 种 样式 ， 如 图 13-31 所 示 。 


区 到 
[六 |] 
2 
HRN) 
[2 


图 屋 样 式 
据 辽 
| | 
et 大 he 一 一 一 一 一 你 
] Hn De 
口 等 线 位 置 P | 外 部 v 
口 59 理 旭 全 模式 B) | 正常 v 
不 通红 (Oo} Bi % 
] 内 阴影 
内 发光 培 充 类 NF); | 颜色 ~ 
号 光泽 me: El 
而 要 加 
一 着 要 加 
口 四 加 
口 4 
EE 证 | | 
图 13-31 “ 描 边 ”选项 


在 “ 描 边 ”选项 中 的 各 参数 如 下 。 


不 透明 度 : 用 来 设置 边框 的 透明 度 。 


3 个 选项 。 
磊 色 : 用 于 设置 边框 的 颜色 。 


13.3 ”设计 常见 的 网 页 特效 文字 


网 页 中 的 特效 文字 可 以 迅速 吸引 网 站 访问 者 的 注意 力 


大 小 : 它 的 数值 的 大 小 和 边框 的 宽度 成 正比 ， 数 值 越 大 的 话 ， 图 像 的 边框 也 就 越 大 。 
位 置 : 设置 描 边 的 位 置 ， 在 其 下 拉 列 表 中 包括 “内 部 "、“ 外 部 ”和 “居中 ”3 个 选项 。 


填充 类 型 : 用 来 设置 边框 的 填充 方式 ， 在 其 下 拉 列 表 中 包括 “颜色 ”、“ 渐 变 ” 和 “图 案 ” 


。 特 效 文字 可 以 用 于 网 页 中 的 任何 地 
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方 ， 精 美的 特效 文字 通常 看 起 来 很 酷 ， 而 且 会 显得 很 华丽 。 
13.3.1 实战 1 一 “发光 文 字 


本 节 讲 述 发 光 文 字 的 制作 ， 效 果 如 图 13-32 所 示 ， 具 体操 作 步 又 如 下 。 


Goldenz ， 
cMemory 
or pp mss 1 


图 13-32 发 光 文字 效果 


原始 文件 ， 原 始 文件 /13/ 发 光 .jpg 
最 终 文件 ， 最 终 文件 /13/ 发 光 . Psd 


步骤 014 启动 Photoshop CC， 打 开 图 像 文 件 “ 发 光 .jpg” 


T 入 TB 3 


， 如 图 13-33 所 示 。 


Goldens. ~ 
SMemory 


FEIRES 


图 13-33 打开 图 像 文件 


步骤 024 选择 工具 箱 中 的 “ 模 排 文字 ”工具 ， 在 选项 栏 中 设置 字体 样式 和 字体 大 小 ， 在 窗口 中 
输入 文字 “我 们 的 故事 ”， 如 图 13-34 所 示 。 
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设置 为 80%， 


第 13 章 ”使 用 Photoshop CC 设计 网 页 中 的 特效 文字 


Golden 
ocMemory 


图 13-34 输入 文字 
步骤 034 执行 “图 层 ”|“ 图 层 样式 ”|“ 外 发 光 ” 命 令 ， 弹 出 “图 层 样式 ”对 话 框 ， 将 “ 杂 色 ” 


“大 小 ”设置 为 50 像素 ，“ 范 围 ” 设 置 为 30%， 如 图 13-35 所 示 。 


步 野 044 单 击 渐变 颜色 按钮 ， 弹 出 “渐变 编辑 器 ”对 话 框 ， 在 该 对 话 框 中 设置 渐变 颜色 ， 如 图 
13-36 所 示 。 


ba 
| RR 
7 区 
口 等 高 绕 

| | Owe 

| 口 齐 过 
| On 
| Di 
| 上 口 便 

| | me 
口 新 天 加 
口 本 大 加 


口 投影 


Ee 汉 输电 各 - ° EE 
Rt | 
于 -| GE) 
4 光 
结构 取消 | 
六 后 民 式 Ey EE ~ 和 > MAD 
TEC [3 新 寻 样式 (w) N| Eee | 
J I 加 HCV) oi | 
0 入 GE eeR | 
二 国 各 (1) 六 ,名 柱 天 和 下 WwW) | | 
方法 (QQ | 闫 和 v 于 闪失 弄 (T 实 民 ~ | 
扩展 PE | ke 平 妇 度 (M): 100 ，| % 
xm | 本 四 
是 a 
Sa | A| mtnst 自 了 了 
色 标 


iO 
讼 村 为 于 认 什 页 位 为 &k 秆 


13-35 “图 层 样式 ”对 话 框 


步 最 054 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 


图 13-36 “渐变 编辑 器 ”对 话 框 
， 如 图 13-37 所 示 。 


va 


( s IT 


图 13-37 设置 图 层 样式 
13.3.2 ”实战 2 一 一 渐变 文字 


本 节 讲 述 渐变 文字 的 制作 ， 效 果 如 图 13-38 所 示 ， 具 体操 作 步 又 如 下 。 


证 


二 ,= 


图 13-38 pe 


原始 文件 : 原始 文件 /13/ 渐 变 .jpg 
最 终 文件 : 最 终 文件 /13/ 渐 变 .Psd 


步骤 014 打开 图 像 文 件 “渐变 jpg”， 如 图 13-39 所 示 。 


图 13-39 打开 图 像 文件 
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第 13 章 ”使 用 Photoshop CC 设计 网 页 中 的 特效 文字 


步骤 024 选择 工具 箱 中 的 “ 模 排 文字 ”工具 ， 在 选项 栏 中 设置 字体 样式 和 字体 大 小 ， 在 窗口 中 
输入 文字 “年 货 节 ”， 如 图 13-40 所 示 。 


图 1340 输入 文字 
步骤 034 执行 “图 层 ”|“ 图 层 样式 ”|“ 渐 变 重 加 ”按钮 ， 弹 出 “图 层 样式 ”对 话 框 ， 单 击 “ 渐 
变 ” 右 边 的 渐变 颜色 按钮 ， 如 图 13-41 所 示 。 


国民 Ea 
et ed Cm 
| | 广 景 

ER BE i 

mS 0). FEE | 
OD nM 

TP): Bl» |% 新 洁 杯 式 (W).… 
gd ] pV) 
Ed Er ean ft 
口才 LT 7 Sr) 
口 m | 一 
口内 发光 
证 at = 一 [本 
DOWER A | | Nl 
DmxB 
口 4 


图 13-41 “图 层 样式 ”对 话 框 
步骤 044 弹出 “渐变 编辑 器 ”对 话 框 ， 在 该 对 话 框 中 设置 渐变 颜色 ， 如 图 13-42 所 示 。 
步骤 054 单 击 “ 确 定 ” 按 钮 ， 设 置 渐变 颜色 。 单 击 勾 选 “ 描 边 ” 复 选 框 ， 设 置 措 边 颜色 为 白色 ， 
如 图 13-43 所 示 。 


Ed - = 
国 a 
We 
Ey 2 
| CEAD I RX E23 吉 一 二 一 
EE 县 语 全 人 We 3 i 
是 CR ER 
P73 rv Dn erto TV) 
bE Em) Toh; 吉 |% 加 
本 ee a 
国 所 Dn Ee: 
EE Lea 
a ba TR 
Da 
ea 口才 
:本 Da | 可 直面 
13-42 设置 渐变 颜色 图 13-43 勾 选 “ 描 边 ” 选 项 
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网 页 设计 与 网 站 建设 全 攻略 


步骤 064 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 效果 ， 如 图 13-44 所 示 。 


图 13-44 设置 图 层 样式 效果 
晶莹 浮雕 文字 


本 节 讲 述 晶莹 浮雕 文字 的 制作 ， 效 果 如 图 13-45 所 示 ， 具 体操 作 步 又 如 下 。 


13.3.3 实战 3 


感谢 有 您 … 


RU 
.| 
图 13-45 ”晶莹 浮雕 文字 
原始 文件 : 原始 文件 /13/ 晶 莹 .jpg 

最 终 文件 : 最 终 文件 /13/ 晶 莹 .psd 


步骤 014 打开 图 像 文 件 “ 晶 莹 jpg”， 如 图 13-46 所 示 。 


Cream 


第 13 章 ”使 用 Photoshop CC 设计 网 页 中 的 特效 文字 


步骤 024 选择 工具 箱 中 的 “ 模 排 文 字 ” 工 具 ， 在 窗口 中 输入 文字 “真爱 ”， 如 图 13-47 所 示 。 


图 1347 输入 文字 
步骤 034 执行 “ 滤 镜 ”|“ 风 格 化 ”|“ 风 ”命令 ， 弹 出 Adobe Photoshop CC 提示 框 ， 如 图 13-48 
所 示 。 
Adobe Photoshop CC 


i 此 文字 图 层 必须 构 格 化 后 才能 继续 。 其 文本 桂 不 能 再 编辑 。 是 否 权 格 化 文字 ? 


确定 取消 


图 13-48 Adobe Photoshop CC 提示 框 
步骤 044 单 击 “ 确 定 ”按钮 ， 弹 出 “ 风 ” 对 话 框 ，“ 方 法 ”选择 “ 风 ”，“ 方 向 ”选择 “从 右 ”， 
如 图 13-49 所 示 。 
步骤 054 单 击 “ 确 定 ” 按 钮 ， 设 置 风 效 果 ， 如 图 13-50 所 示 。 
步 最 064 执行 “图 层 ”|“ 图 层 样式 ”|“ 投 影 ” 命 令 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 设 置 投影 参数 ， 
如 图 13-51 所 示 。 
步骤 07 4 单 击 勺 选 “渐变 重 加 ” 复 选 框 ， 设 置 渐变 三 加 参数 ， 如 图 13-52 所 示 。 


工 

Ee 
”oo 
~ 蕊 


a 


图 13-49 “ 风 ” 对 话 框 图 13-50 设置 风 效 果 
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ea ed 
口 而 要 si: | A| iat 
EE Om 


回国 = 失信 人 


设 二 X 入 候 | | 号 位 XU 间 


图 13-51 设置 “投影 ”参数 图 13-52 ”设置 “渐变 硬 加 ”参数 

步 又 08 4 单 击 义 选 “斜面 和 浮雕 ” 复 选 框 ， 设 置 “深度 ”为 150%，“ 大 小 ”为 8 像素 ，“ 高 度 ” 
为 60 度 ， 如 图 13-53 所 示 。 

步骤 094 单 击 “ 确 定 ”按钮 ， 设 置 浮雕 效果 如 图 13-54 所 示 。 


pt 和 
Ee E 
la 结构 
珊 可 MA 
| > ~ 冲 瑞 厢 


ECV) 


CG 


DL El 


世 划 次 吕 加 2) tt 
Sm 
人 "| DM tt) 
设 加 8H 认 从 于 
图 13-53 设置 “斜面 和 浮雕 ”参数 图 13-54 ”设置 浮雕 效果 
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第 14 章 ”设计 网 页 元 素 


本 章 导读 


利用 Photoshop CC 设计 网 页 元 素 通常 可 以 达到 意 想 不 到 的 效果 ， 这 不 只 是 取决 于 它 可 以 
随意 布局 图 片 ， 更 得 意 于 其 专业 的 图 像 处 理 能 力 。 本 章 就 来 讲述 如 何 设 计 常 见 的 网 站 Logo、 网 
络 广告 、 网 页 按钮 、 网 页 导航 和 网 站 首页 效果 。 


设计 网 站 Logo 
网 络 广告 的 制作 
设计 网 站 首页 
设计 网 页 按钮 
制作 导航 栏 


实例 展示 


按钮 网 站 导航 


( s IT 
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14.1 设计 网 站 Logo 


网 站 中 的 Logo 主要 是 各 个 网 站 用 来 与 其 他 网 站 链接 的 图 形 标志 ， 代 表 一 个 网 站 或 网 站 的 一 
个 板块 。 


14.1.1 Logo 的 特点 


随 着 经 济 的 飞速 发 展 ， 具 有 高 度 实用 性 和 艺术 性 的 Logo 已 被 广泛 应 用 于 社会 一 切 领域 。 对 
于 这 个 新 事物 ， 我 们 可 以 看 到 具有 以 下 特点 ， 分 别 为 功用 性 、 识 别 性 、 显 著 性 、 多 样 性 、 艺 术 性 、 
准确 性 和 持久 性 等 。 


@ 规范 Logo 的 标准 色 、 恰 当 的 背景 配色 体系 、 反 白 、 在 清晰 表现 Logo 的 前 提 下 制订 Logo 
最 小 的 显示 尺寸 ， 为 Logo 制订 一 些 特定 条 件 下 的 配色 、 辅 助 色 带 等 。 

@ 完整 的 Logo 设计 ,尤其 是 具有 中 国 特色 的 Logo 设计 。 在 国际 化 的 要 求 下 ， 一 般 应 至 少 使 
用 中 英文 双语 的 形式 ， 并 考虑 中 英文 字 的 比例 、 搭 配 ， 有 的 还 要 考虑 繁体 、 其 他 特定 语言 
版 本 等 。 

@ 为 了 便于 互联 网 上 信息 的 传播 ， 需 要 一 个 统一 的 国际 标准 。 关 于 网 站 的 Logo， 目 前 有 以 
下 3 种 规格 。 

> 88*31: 这 是 互联 网 上 最 普遍 的 友情 链接 Logo， 因 为 这 个 Logo 主要 是 放 在 别人 的 网 
站 显示 ， 让 别 的 网 站 的 用 户 单 击 这 个 Logo 进入 网 站 ， 几 乎 所 有 网 站 的 友情 链接 都 使 
用 这 个 统一 的 规格 。 

> 120*60: 这 种 规格 用 于 一 般 大 小 的 Logo， 一 般 用 在 网 站 首页 上 的 Logo 广告 。 

> 120*90: 这 种 规格 用 于 大 型 网 站 Logo。 


14.1.2 ”Logo 设计 标准 


Logo 的 设计 要 能 够 充分 体现 该 公司 的 核心 理念 ， 并 且 设 计 要 求 动感 、 活 力 、 简 约 、 大 气 、 高 
品位 、 色 彩 搭配 合理 、 美 观 。 网 站 Logo 设计 有 以 下 标准 。 

@ 符合 企业 的 VI 总 体 设 计 要 求 。 网 站 的 Logo 设计 要 与 企业 的 VI 设 计 一 致 。 

@ 要 有 良好 的 造型 。 企 业 标志 设计 的 题材 和 形式 丰富 多 彩 ， 如 有 中 外 文字 体 、 具 备 图 案 、 抽 
象 符号 、 几 何 图 形 等 ， 因 此 标志 造型 变化 就 显得 格外 活泼 生动 。 
设计 要 符合 传播 对 象 的 直观 接受 能 力 、 习 惯 、 社 会 心理 、 习 俗 与 禁忌 。 
构图 需 美 观 、 适 当 、 简 练 、 讲 究 艺术 效果 。 
色彩 最 好 单纯 、 强 烈 、 醒 目 ， 力 求 色彩 的 感性 印象 与 企业 的 形象 风格 相符 。 
标志 设计 一 定 要 注意 其 识别 性 ， 识 别 性 是 企业 标志 的 基本 功能 。 通 过 整体 规划 和 设计 的 视 
觉 符 号 ， 必 须 具 有 独特 的 个 性 和 强烈 的 冲击 力 。 
@ 不 要 使 用 太 大 、 太 多 、 太 模糊 的 图 片 ， 这 样 会 引起 浏览 者 的 反感 。 


14.1.3 ”实战 1 一 一 网 站 Logo 设计 实例 


本 节 介 绍 利用 Photoshop CC 设计 一 个 漂 


亮 的 网 站 Logo 标志 ， 设 计 出 来 的 效果 非常 漂 sem 
亮 ， 效 果 如 图 14-1 所 示 。 A 


最 终 文件 : 最 终 文件 /14/1ogo.Psd 0 


步 又 014 启动 Photoshop CC， 执 行 “ 文 件 ”| 
“新 建 ”命令 ， 新 建 一 个 空白 文档 ， by 
如 图 14-2 所 示 。 a 
步骤 024 选择 工具 箱 中 的 “ 自 定义 形状 ” 工 图 14-1 网 站 Logo 效果 
具 ， 在 选项 栏 中 单 击 “ 形 状 ” 右 边 
的 下 拉 按钮 ， 在 弹出 的 列表 中 选择 合适 的 形状 ， 如 图 14-3 所 示 。 


这 亲 丽 -可 对 


VY mw ov WE bed A 


信人 火光 作 


el@| =| 加 
1 天 回国 vv 1 
FAL 


图 14-2 ”新建 空白 文档 图 14-3 选择 形状 


步 又 034 在 窗口 中 按 住 鼠 标 左 键 ， 在 窗口 中 绘制 环形 ， 如 图 14-4 所 示 。 
步 野 044 打开 “图 层 ”面板 ， 右 击 文本 图 层 ， 在 弹出 的 快捷 菜单 中 选择 “ 栅 格 化 图 层 ”命令 ， 
如 图 14-5 所 示 。 


图 14-4 ”绘制 环形 图 14-5 选择 “ 栅 格 化 图 层 ” 命 令 
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步 最 054 选择 工具 箱 中 的 “渐变 工具 ”， 在 选项 栏 中 单 击 “点 按 可 编辑 渐变 ”按钮 ， 弹 出 “ 渐 
变 编辑 器 ”对 话 框 ， 设 置 渐变 颜色 ， 如 图 14-6 所 示 。 

步骤 064 选择 工具 箱 中 的 “渐变 ”工具 ， 在 窗口 中 单 击 环形 选择 环形 ， 将 鼠标 从 上 向 下 拖 动 填 
充 环形 ， 如 图 14-7 所 示 。 


浙 支 扣 名 器 -EN 
a [3 
预 设 - [ 三 
了 
芝 WAU 
存储 (5). 
韦 称 (N); 。 杠 , 首 , 杷 莉 究 新 建 (W) 


潭 让 类 型 (T): 实 诺 Y 
平滑 谋 (M):| 100| ， | 哆 


加 LL 
ER | 
全 晶 @ 
色 标 
人 
图 14-6 设置 渐变 颜色 图 14-7 填充 环形 


步骤 07 人 选择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 选项 栏 中 单 击 形状 按钮 ， 在 弹出 的 列表 中 选 
择 合适 的 形状 ， 在 窗口 中 按 住 鼠 标 左 键 绘制 形状 ， 如 图 14-8 所 示 。 
步骤 08 执行 “编辑 ”|“ 变 换 ”|“ 变 形 ” 命 令 ， 对 图 形 进行 变形 ， 如 图 14-9 所 示 。 


re es V 亲 四 


图 14-8 绘制 形状 图 14-9 对 图 形 进行 变形 
步骤 09 执行 “图 层 ”|“ 图 层 样式 ”| “混合 选项 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 单 击 左边 
的 “样式 ”选项 ， 在 弹出 的 样式 表 中 选择 合适 的 样式 ， 如 图 14-10 所 示 。 
步 最 104 单 击 “确定 ”按钮 ， 设 置 图 层 样式 效果 ， 如 图 14-11 所 示 。 
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™ 
对 
图 14-10 “图 层 样式 ”对 话 框 图 14-11 设置 图 层 样式 效果 


步骤 114 选择 工具 箱 中 的 “ 横 排 文 字 ” 工 具 ， 在 窗口 中 设置 字体 样式 和 字体 大 小 ， 在 窗口 中 输 
入 文字 1， 如 图 14-12 所 示 。 

步骤 12 执行 “图 层 ”|“ 图 层 样式 ”|“ 混 合 选项 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 单 击 左边 
的 “样式 ”选项 ， 在 弹出 的 样式 表 中 选择 合适 的 样式 ， 如 图 14-13 所 示 。 


可 居 科 式 [>| 
i E 
PR LDOUDOODN 三 | 
We LIA eft) 
J 
jp 国 
ee 
a 
as 
ere 
ER 
pe 
a 
图 14-12 输入 文字 图 14-13 “图 层 样式 ”对 话 框 


步 又 13 4 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 ， 如 图 14-14 所 示 。 
步 最 144 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 选项 栏 中 设置 字体 样式 和 字体 大 小 ， 在 窗口 中 
输入 字母 o， 如 图 14-15 所 示 。 


图 14-14 设置 图 层 样式 图 14-15 输入 字母 o 
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步骤 15 人 执行 “图 层 ”|“ 图 层 样式 ”|“ 混 合 选项 ”命令 ， 弹 出 “图 层 样 式 ”对话 框 ， 单 击 左边 
的 “样式 ”选项 ， 在 弹出 的 样式 表 中 选择 合适 的 样式 ， 如 图 14-16 所 示 。 
步 又 164 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 效果 ， 如 图 14-17 所 示 。 


AS 和 | 


图 14-16 “图 层 样式 ”对 话 框 图 14-17 设置 图 层 样式 效果 


14.2 ”网 络 广告 的 制作 


告 ， 已 经 成 为 在 线 生活 的 一 部 分 。 当 我 们 关注 网 站 和 产品 的 用 户 体验 时 ， 广 告 不 应 该 被 忽 
视 。 本 节 就 来 讲述 如 何 进行 前 期 的 设计 ， 使 其 发 挥 良好 的 广告 推广 作用 。 


14.2.1 网 络 广告 设计 技巧 


广告 设计 中 主要 包括 的 内 容 是 “图 片 ”， 本 节 总 结 了 在 广告 设计 中 的 一 些 技巧 。 
1. 构思 画面 


一 个 好 的 网 络 广告 应 在 其 放置 的 网 页 上 十 分 醒目 、 出 众 ， 使 用 户 在 随意 浏览 的 几 秒 钟 之 内 就 
能 感觉 到 它 的 存在 。 为 此 ， 应 充分 发 挥 电脑 图 像 和 动画 技术 的 特长 ， 使 广告 具有 强烈 的 视觉 冲击 
力 。 旗 帜 广告 的 颜色 可 考虑 多 用 明黄 、 橙 红 、 天 蓝 等 艳丽 色 ， 强 调动 画 效果 。 从 视觉 原理 上 讲 ， 
动画 比 静 态 图 像 更 能 引 人 注 目 ， 有 统计 表明 其 吸引 力 会 提高 三 倍 。 当 然 ， 也 要 注意 广告 与 网 页 内 
容 与 风格 相 融 合 ， 但 一 定 要 避免 用 户 误 将 广告 当成 装饰 画 。 

2. 构思 广告 语 
标题 展露 最 吸引 人 之 处 ， 力 争 开头 抓 住 用 户 的 注意 力 。 
正文 句子 要 简短 、 直 堆 了 当 ， 尽 量 用 短语 ， 避 免 完 整 长 句 。 
语句 要 口语 化 、 不 绕 弯 子 。 

可 以 适当 运用 感叹 号 ， 增 强 语气 效果 。 
如 果 要 引导 用 户 从 广告 访问 企业 网 站 ， 应 使 用 “请 点 击 ”或 “Click” 等 文字 。 
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3. 内 容 更 换 ， 常 新 常 看 

网 友 的 注意 力 资源 有 限 ， 应 该 尽力 争取 “回头 客 ” 最 基本 的 招数 就 是 经 常 更 换 内 容 。 内 容 
常 新 的 广告 ， 可 以 使 经 常 访问 网 页 的 用 户 感觉 到 广告 的 存在 ， 因 为 任何 好 的 广告 图 像 ， 如 果 用 户 
看 多 了 也 会 视而不见 。 统 计 表 明 ， 当 广告 图 像 不 变 时 ， 点 击 率 会 逐步 下 降 ， 而 更 换 图 像 后 ， 点 击 
率 又 会 上 升 。 广 告 更 新 频率 一 般 为 两 周一 次 。 

在 制作 广告 时 ， 一 定 要 考虑 下 载 速度 ， 图 像 要 尽量 少 ， 容 量 应 保持 在 10KB 左右 。 


4. 定位 目标 受众 


首先 必须 准确 锁定 目标 受众 , 然后 根据 你 的 实际 预算 , 寻找 适合 他 们 最 可 能 光顾 的 网 站 媒体 。 
如 果 广 告 预 算 不 宽裕 (大 多 数 网 上 企业 都 是 这 样 ), 那么 重点 是 像 新 闻 邮 件 、 电 子 杂志 之 类 的 小 型 
网 上 媒体 ， 而 不 应 是 广告 价位 高 昂 的 大 型 网 上 媒体 。 这 类 网 站 数量 众多 ， 有 覆盖 领域 也 越 来 越 广 。 
但 是 发 行 量 相差 悬殊 ， 吸 引 的 受众 特征 也 各 不 相同 。 唯 一 的 共同 点 是 广告 价格 便宜 。 


14.2.2 ”实战 2 一 一 设计 网 络 广告 


网 络 广告 是 目前 最 为 常用 的 网 络 营销 表现 形式 ， 本 节 讲 述 网 络 广告 的 设计 制作 ， 效 果 如 图 
14-18 所 示 ， 有 具体 操作 步骤 如 下 。 


图 14-18 网 络 广告 效果 
最 终 文件 ， 最 终 文件 /14/ 网 络 广告 .psd 
步 又 01.4 启动 Photoshop CC， 执 行 “ 文 件 ”| “新建 ”命令 ， 弹 出 “新 建 ”对 话 框 ， 将 “宽度 ” 
设置 为 800，“ 高 度 ” 设 置 为 450， 如 图 14-19 所 示 。 
步骤 024 单 击 “ 确 定 ”按钮 ， 新 建 空白 文档 ， 如 图 14-20 所 示 。 


283 


G) 网 页 设计 与 网 站 建设 全 攻略 


284 


新 奸 ES 
种 (N): [未 标 是 了 和 
预 设 (P): | 自 定 取消 
存 鱼 湛 设 (5).- 
E33 ~ 六 设 
凤 毒 v 
像素 硕士 v 
颜色 模式 (M):| RGB 颜色 v 8 位 v 
背景 内 容 (CO): 白色 v| 图 名 大 小 
图 14-19 “新建” 对话 框 图 14-20 新建 空 白文 档 


步骤 034 选择 工具 箱 中 的 “渐变 工具 ”， 在 选项 栏 中 单 击 “ 点 按 可 编辑 渐变 ”按钮 ， 弹 出 “ 渐 
变 编辑 器 ”对 话 框 ， 设 置 渐 变 颜 色 ， 如 图 14-21 所 示 。 
步骤 044 将 鼠标 从 上 向 下 拖 动 填充 背景 图 像 ， 如 图 14-22 所 示 。 


浙 安 坟 扩 四 - 5° 
预 设 0 三 
pa 这 WA 
和 惧 (5) ek 
7 
NN | Ri 汉人 
浙 灾 汕 PT | 实 所 v RY 
P00] ?|% sa 
' a 下 
6 
ED 
名 所: 位 置 (ch 100 |% RD) 
图 14-21 “渐变 编辑 器 ”对 话 杠 图 14-22 ”填充 背景 图 像 


柯 


步骤 05 执行 “文件 ”|“ 置 入 ”命令 ， 弹 出 
14-23 所 示 。 
步骤 064 单 击 “ 置 入 ”按钮 ， 置 入 图 像 文件 ， 如 图 14-24 所 示 。 


“ 置 入 ”对 话 框 ， 选 择 图 像 文件 “沙发 .gif”， 如 


= 
总 
2 i 
图 14-23 “ 置 入 ”对 话 框 图 14-24 置 入 图 像 文件 
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步 最 07 4 重复 步骤 5S-6， 置 入 图 像 文件 “ 花 .gif” 和 “床头柜 .gif” ， 如 图 14-25 所 示 。 
步骤 08 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 窗口 中 输入 文字 “高 雅 艺术 品质 ”， 如 图 14-26 


过 
罗 


4 


日 


图 14-25 置 入 图 像 图 14-26 输入 文字 
步骤 094 执行 “图 层 ”|“ 图 层 样式 ”|“ 外 发 光 ” 命 令 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 设 置 外 发 光 
参数 ， 将 “大 小 ”设置 为 15， 如 图 14-27 所 示 。 
步骤 104 单 击 “ 确 定 ” 按 钮 ， 设 置 图 层 样式 效果 ， 如 图 14-28 所 示 。 


RE Ea 
A 外 天 
En] | 二 
Hi | | Fas 宇 和 i 
5 4 ow Zia) 
FE a C9) 国 pe 高 雅 艺术 口 质 
es TE 可 村 己 个 铬 只 
] 可 服 人 打 展 Pj: 本 9 % | 
1 ee es bh c | pmb 可 
国有 a EY Pi ee hy 
pe st: [LE] Cissen > 二 加 < CX EA 
0 ms | pa 
Pe 
NR 
图 14-27 “图 层 样式 ”对 话 框 图 14-28 设置 外 发 光 效果 


步骤 114 选择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 选项 栏 中 单 击 形状 右边 的 下 拉 按 钮 ， 在 弹出 
的 列表 中 选择 合适 的 形状 ， 如 图 14-29 所 示 。 
步骤 124 在 窗口 中 按 住 鼠 标 左 键 绘制 形状 ， 如 图 14-30 所 示 。 
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图 14-29 选择 形状 


图 14-31 “图 层 样式 ”对 话 框 


置 为 白色 ， 单 击 “ 确 定 ” 按 钮 ， 


ET 
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图 14-33 ”输入 文字 
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图 14-30 绘制 形状 


步骤 13 执行 “图 层 ”|“ 图 层 样式 ”|“ 混 合 选项 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 单 击 左边 
的 “样式 ”选项 ， 在 弹出 的 样式 表 中 选择 合 
步骤 144 单 击 “ 确 定 ” 按 钮 ， 设 置 图 层 样式 效果 ， 如 图 14-32 所 示 。 


适 的 样式 ， 如 图 14-31 所 示 。 


图 14-32 ”设置 图 层 样式 效果 


所 


«图 


步骤 15 4 选择 工具 箱 中 的 “ 横 排 文 字 ” 工 具 ， 在 绘制 的 形状 上 面 输 入 文字 ， 如 图 14-33 所 示 。 
步骤 164 执行 “图 层 ”|“ 图 层 样式 ”|“ 描 边 ” 命 令 ， 弹 出 
设置 描 边 效 果 ， 如 


层 样式 ”对 话 框 ， 将 描 边 颜色 设 


图 14-34 所 示 。 


高 雅 艺 术 品 质 


图 14-34 设置 描 边 效 果 
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步骤 17 4 选择 工具 箱 中 的 “和 矩形” 工具, 在 窗口 的 底部 按 住 鼠标 左 键 绘制 矩形 , 如 图 14-35 所 示 。 
步骤 184 重复 步骤 15， 然 后 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 效果 ， 如 图 14-36 所 示 。 


2 14 17 月 世家 居 生 活 外 需 抢 !1 


图 14-35 ”绘制 矩形 图 14-36 设置 图 层 样式 效果 
14.3 ”设计 网 站 首页 


网 站 首页 是 一 个 网 站 的 入 口 网 页 ， 往 往 会 被 编辑 得 易于 了 解 该 网 站 ， 并 引导 互联 网 用 户 浏览 
网 站 其 他 部 分 的 内 容 。 所 以 设计 一 个 简单 精美 实用 的 网 站 是 比较 重要 的 。 


14.3.1 ”实战 3 一 一 首页 的 制作 


本 节 讲 述 利用 Photoshop CC 设计 网 站 首页 效果 ， 如 图 14-37 所 示 ， 上 有 具体 操作 步骤 如 下 。 


Ww 首页 撕 配 收纳 家 居 商 城 “创意 家 居 家 居 常 识 ”家 居 生 活 。 关注 我 们 


推荐 新 闻 联系 我 们 

Sm 

二 =- 鲍 、 

[可 区 e000 
2 时 在 二 服务 


图 14-37 网 站 首页 效果 
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最 终 文件 : 最终 文件 /14/ 首 页 .psd 


步 又 01 启动 Photoshop CC， 执 行 “文件 ” |“ 新建” 命令 ， 弹 出 “新 建 ”对 话 框 ， 将 “宽度 ” 
设置 为 1000，“ 高 度 ” 设 置 为 645， 如 图 14-38 所 示 。 

步骤 024 单 击 “确定 ”按钮 ， 新 建 空 白文 档 。 选 择 工具 箱 中 的 “和 矩形” 工具， 在 选项 栏 中 将 填 
充 颜 色 设置 为 dfae72， 在 窗口 中 按 住 鼠 标 左 键 绘制 矩形 ， 如 图 14-39 所 示 。 


图 14-38 “新建” 对话 框 图 14-39 绘制 矩形 


步骤 034 执行 “ 滤 镜 ”|“ 杂 色 ”|“ 添 加 杂 色 ”命令 , 弹出 Adobe Photoshop CC 提示 框 ， 如 图 14-40 
所 示 。 

步骤 044M 单 击 “ 确 定 ” 按 钮 ， 弹 出 “添加 杂 色 ”对 话 框 ， 将 “数量 ”设置 为 8%， 如 图 14-41 
所 示 。 


确定 
取消 
mp) 


加 10% 国 


数量 (A): 8 % 

一 
分 布 

图 平均 分 布 (U) 

口 高 斯 分 布 (5) 


口 单 色 (M) 
14-40 ”Adobe Photoshop CC 提示 框 图 14-41 “添加 杂 色 ”对 话 框 
步骤 05 单 击 “ 确 定 ” 按 钮 ， 添 加 杂 色 效果 ， 如 图 14-42 所 示 。 
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图 14-42 添加 杂 色 效果 


步骤 064 选择 工具 箱 中 的 “矩形 ”工具 ， 在 选项 栏 中 将 填充 颜色 设置 为 31000d， 在 窗口 的 顶部 
绘制 矩形 ， 如 图 14-43 所 示 。 


图 14-43 ”绘制 矩形 


步骤 074 选择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 选项 栏 中 单 击 “ 形 状 ”按钮 ， 在 弹出 的 列表 
中 选择 合适 的 形状 ， 在 窗口 中 绘制 绿色 形状 ， 如 图 14-44 所 示 。 


a 


14-44 ”绘制 绿色 形状 
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步 又 084 执行 “图 层 ”|“ 图 层 样式 ”| “混合 选 项 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 单 击 右边 
的 “样式 ”选项 ， 在 弹出 的 列表 框 中 选择 合适 的 样式 ， 如 图 14-45 所 示 。 


I Na] 


om sumear™m 
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图 14-45 选择 样式 
步骤 094 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 效果 ， 如 图 14-46 所 示 。 


己 


图 14-46 设置 图 层 样式 效果 


步骤 104 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 选项 栏 中 设置 其 参数 ， 在 窗口 中 输入 文字 “ 广 
友 家 居 ”， 如 图 14-47 所 示 。 


图 14-47 输入 文字 
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步骤 114 执行 “图 层 ”|“ 图 层 样式 ”|“ 描 边 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 将 “大 小 ” 设 
置 为 5，“ 填 充 类 型 ”设置 为 渐变 ， 如 图 14-48 所 示 。 
步骤 124 单 击 “ 确 定 ” 按 钮 ， 设 置 描 边 效果 ， 如 图 14-49 所 示 。 


I 


Een | | XU 


图 14-48 “图 层 样式 ”对 话 框 图 14-49 设置 描 边 效果 
步骤 13 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 窗口 中 输入 导航 文本 ， 如 图 14-50 所 示 。 


加 日 


图 14-50 输入 导航 文本 
步骤 14 选择 工具 箱 中 的 “ 算 形 ”工具 ， 在 窗口 中 绘制 矩形 ， 如 图 14-51 所 示 。 


图 14-51 ”绘制 矩形 
步骤 154 执行 “文件 ”|“ 置 入 ”命令 ,弹出 “ 置 入 ”对 话 框 ,选择 图 像 文件 0012.jpg， 如 图 14-52 


所 示 。 
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步骤 164M 单 击 “ 置 入 ”按钮 ， 置 入 图 像 文件 ， 调 整 图 像 的 大 小 和 位 置 ， 如 图 14-53 所 示 。 


图 14-52 “ 置 入 ”对 话 框 图 14-53 置 入 图 像 文 件 


步骤 17 4 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 选项 栏 中 设置 其 参数 ， 在 工作 区 中 输入 文字 “ 推 
荐 新 闻 ”， 如 图 14-54 所 示 。 

步骤 18M 执行 “图 层 ”|“ 图 层 样式 ”|“ 外 发 光 ” 命 令 ， 弹 出 “图 层 样式 ”对 话 框 ， 将 “大 小 ” 
设置 为 10， 如 图 14-55 所 示 。 
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图 14-54 ”输入 文字 图 14-55 “图 层 样式 ”对 话 框 
步骤 194 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 外 发 光 效果 ， 如 图 14-56 所 示 。 
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图 14-56 ”外 发 光 效 果 
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步骤 20 选择 工具 箱 中 的 “直线 ”工具 ， 在 窗口 中 绘制 黄色 直线 ， 如 图 14-57 所 示 。 


图 14-57 绘制 直线 
步骤 214 执行 “文件 ”|“ 置 入 ”命令 ， 弹 出 “ 置 入 ”对 话 框 ， 时 入 国 你 -2p 如 图 14-58 所 示 。 
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图 14-58 置 入 图 像 


步骤 224 选择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 选项 栏 中 单 击 “样式 ”按钮 ， 在 弹出 的 列表 
中 选择 合适 的 形状 ， 在 窗口 中 按 住 鼠 标 左 键 绘制 4 个 箭头 形状 ， 如 图 14-59 所 示 。 


图 14-59 绘制 箭头 形状 
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步骤 234 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 窗口 中 输入 新 闻 文 本 ， 如 图 14-60 所 示 。 
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图 14-60 ”输入 文本 
步 又 244 选择 工具 箱 中 的 “矩形 ”工具 ， 在 窗口 中 绘制 深 绿色 的 矩形 ， 如 图 14-61 所 示 。 


图 14-61 绘制 矩形 


步骤 25 选择 工具 箱 中 的 “和 矩形” 工具， 在 矩形 的 上 面 绘制 一 个 白色 的 大 矩形， 绘制 3 个 小 白 
色 的 矩形 ， 在 绘制 3 个 灰色 的 矩形 ， 如 图 14-62 所 示 。 


图 14-62 ”绘制 矩形 
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步 枝 264 执行 “文件 ” |“ 置 入 ”命令 ， 弹 出 “ 置 入 ”对 话 框 ， 置 入 图 像 1jpg， 如 图 14-63 所 示 。 


图 14-63 置 入 图 像 
步骤 274 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 矩形 上 面 输 入 文本 ， 如 图 14-64 所 示 。 


图 14-64 ”输入 文本 


步 双 28 人 执行 “文件 ”|“ 置 入 ”命令 ， 弹 出 “ 置 入 ”对 话 框 ， 置 入 图 像 lianxi.gif， 如 图 14-65 
所 示 。 


图 14-65 置 入 图 像 
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步骤 29 人 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 输 入 文字 ， 如 图 14-66 所 示 。 


2 \ RE ee ee se see en 


i 输入 文字 
14.3.2 ”实战 4 一 一 切割 输出 首页 图 像 


切片 是 网 页 制作 过 程 中 非常 重要 的 一 个 步骤 ， 往 往 切 片 的 正确 与 否 会 影响 着 网 页 的 后 期 制作 。 
一 般 是 用 Photoshop 对 网 页 的 效果 图 或 者 大 幅 的 图 片 进行 切 割 ， 切 割 后 的 效果 如 图 14-67 所 示 。 


CD 


图 14-67 切割 网 页 
下 面 就 通过 实例 讲解 快速 制作 Web 文件 ， 有 具体 操作 步骤 如 下 。 
步 又 01 人 启动 Photoshop CC， 打 开 上 节制 作 好 的 首页 文件 ， 如 图 14-68 所 示 。 


RE 


图 14-68 ”打开 图 像 
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步骤 02 选择 工具 箱 中 的 “切片 ”工具 ， 在 窗口 中 按 住 鼠标 左 键 绘制 切片 ， 如 图 14-69 所 示 。 


FE 


图 14-69 ”绘制 切片 
步骤 034 按 住 鼠标 左 键 在 窗口 中 绘制 多 个 切片 ， 如 图 14-70 所 示 。 


图 14-70 ”绘制 多 个 切片 
步骤 044 执行 “文件 ”|“ 存 储 为 Web 所 用 格式 ”命令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 话 框 ， 
如 图 14-71 所 示 。 
步骤 054 单 击 “ 确 定 ”按钮 ， 打 开 “ 将 优化 结果 存储 为 ”对 话 框 ， 将 “格式 ”选择 为 “HTML 
和 图 像 ” 选 项 ， 如 图 14-72 所 示 。 
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14-71 “ “存储 为 Web 所 用 格式 ”对 话 框 14-72 “将 优化 结果 存储 为 ”对 话 框 
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按钮 是 网 页 中 最 常用 的 、 也 是 最 基本 的 一 种 控制 部 件 ， 通 过 按钮 可 以 快速 地 找到 自己 所 需要 
的 网 页 位 置 ， 下 面 将 具体 讲解 按钮 的 基本 制作 。 


14.4.1 实战 5 一 一 制作 圆 角 按钮 


本 实例 主要 使 用 Photoshop CC 通过 图 层 样 式 制 作 立 体 圆 


角 按 钮 ， 效 果 如 图 14-73 所 示 。 具 体操 作 步 又 如 下 。 弃 ” 圆 角 按 钮 。 
步骤 01 执行 “文件 ” |“ 新建” 命令 ， 新 建 空 白文 档 ， 如 图 
14-74 所 示 。 图 14-73 ” 圆 角 按钮 效果 


步骤 024 打开 “图 层 ” 面板 ， 单 击 底部 的 “创建 新 图 层 ” 按 
钮 国 ， 即 可 新 建 图 层 1， 如 图 14-75 所 示 。 


oT ne 
加 不 要 明度 : 100% 属 


图 14-74 新建 空白 文档 图 14-75 新建 图 层 1 


步骤 034 选择 工具 箱 中 的 “ 圆 角 和 矩形 ”按钮 ， 在 选项 栏 中 将 “填充 ”颜色 设置 为 白色 ，“ 描 边 ” 
设置 为 绿色 ， 在 窗口 中 绘制 圆 角 矩形 ， 如 图 14-76 所 示 。 
步骤 044 在 “图 层 ” 面 板 将 图 角 和 矩形 拖 动 到 “复制 图 层 ” 按 钮 上 ， 拷 贝 图 层 ， 如 图 14-77 所 示 。 
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图 14-76 ”绘制 圆 角 抵 形 图 14-77 拷贝 图 层 
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步 最 054 执行 “图 层 ”|“ 图 层 样式 ”|“ 渐 变 颜 色 ” 命 令 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 设 置 渐变 


参数 ， 如 图 14-78 所 示 。 
步骤 064 单 击 “ 确 定 ”按钮 ， 设 置 渐变 效果 ， 如 图 14-79 所 示 。 
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图 14-78 ”设置 渐变 颜色 图 14-79 设置 渐变 效果 
步骤 07 人 在 “图 层 ” 面 板 中 选择 拷贝 的 图 层 ， 将 窗口 中 的 圆 角 和 矩形 向 上 移动 ， 如 图 14-80 所 示 。 


图 14-80 ”移动 矩形 
步骤 08 4 在 “图 层 ” 面板 中 单 击 “创建 新 图 层 ” 按 钮 ， 新 建 图 层 1， 选 择 工具 箱 中 的 “椭圆 选 框 ” 
工具 ， 在 矩形 上 面 绘制 选 框 ， 如 图 14-81 所 示 。 
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图 14-81 绘制 选 框 
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步骤 094 按 Ctrl+Delete 键 填充 选区 ， 如 图 14-82 所 示 。 
步骤 104 打开 “图 层 ”面板 ， 将 “不 透明 度 ” 设 置 为 20%， 如 图 14-83 所 示 。 


o 苹 轩 加 角 j5H : 抄 风 。 友 目 
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图 14-83 ”设置 不 透明 度 
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图 14-82 ”填充 选 


步骤 114 设置 完 效果 如 图 14-84 所 示 。 
步 又 124 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 窗口 中 输入 文字 “ 圆 角 按钮 ， 如 图 14-85 所 示 。 


可 海 和 上 洁 。 样式 


图 14-84 设置 完 效果 图 14-85 输入 文字 
14.4.2 ”实战 6 一 一 制作 矩形 按钮 
下 面 讲述 矩形 按钮 的 制作 ， 效 果 如 图 14-86 所 示 。 具 体操 作 步 骤 如 下 。 
网 站 首页 
图 14-86 ”和 矩形 按钮 效果 


步 最 014 启动 Photoshop CC， 执 行 “ 文 件 ” |“ 新建” 命令， 新 建 空 白文 档 ， 选 择 工具 箱 中 的 “和 抵 
形 ” 工 具 ， 在 窗口 中 绘制 绿色 矩形 ， 如 图 14-87 所 示 。 
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步骤 024 执行 “图 层 ”|“ 图 层 样式 ” |“ 投影” 命令， 弹出 “图 层 样式 ”对 话 框 ， 将 “距离 ”和 
“大 小 ”设置 为 5， 如 图 14-88 所 示 。 
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图 14-87 ”绘制 矩形 图 14-88 “图 层 样式 ”对 话 框 
步 双 034 勾 选 “内 发 光 ” 复 选 框 ， 设 置 内 发 光 颜 色 为 浅 绿色 ，“ 杂 色 ” 设 置 为 50%，“ 大 小 ” 
设置 为 60， 如 图 14-89 所 示 。 
步骤 044 勾 选 “斜面 和 浮雕 ” 复 选 框 ， 将 “大 小 ”设置 为 15，“ 不 透明 度 ” 设 置 为 60%，“ 阴 
影 模式 ”设置 为 黄色 ， 如 图 14-90 所 示 。 
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图 14-89 “内 发 光 ” 选 项 图 14-90 “斜面 和 浮雕 ”选项 

步骤 054 单 击 “ 确 定 ” 按 钮 ， 设 置 图 层 样式 ， 如 图 14-91 所 示 。 

步 最 064 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 按钮 上 面 输入 文字 “网 站 首页 ”， 如 图 14-92 
所 示 。 
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图 14-91 设置 图 层 样式 


14.5 ”制作 导航 栏 


图 14-92 输入 文字 


导航 栏 是 一 个 网 站 的 地 图 ， 访客 可 以 通过 导航 纵 观 整 个 网 站 的 概况 ， 并 且 方 便 他 们 快速 到 达 


想 要 了 解 的 地 方 。 本 节 讲述 利用 PS 设计 制作 网 页 首页 导航 栏 。 


14.5.1 实战 7 一 一 制作 简单 精美 的 导航 栏 


本 节 讲 述 制作 简单 精美 的 导航 栏 ， 效 果 如 图 14-93 所 示 。 具 体操 作 步 又 如 下 。 


图 14-93 ”导航 栏 效果 


最 终 文件 : 最 终 文件 /14/ 导 航 栏 .Psd 


步骤 014 启动 Photoshop CC， 新 建 空白 文档 ， 选 择 工 具 箱 中 的 “和 矩形” 工具， 在 窗口 中 绘制 矩 
形 ， 如 图 14-94 所 示 。 
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图 14-94 ”绘制 矩形 
| “图 层 样式 ”| “渐变 ”命令 ， 弹 出 “ 


图 层 样式 ”对 话 框 ， 将 单 击 “ 渐 变 ” 
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按钮 ， 弹 出 “渐变 编辑 器 ”对 话 框 ， 设 置 渐变 颜色 ， 如 图 14-95 所 示 。 
步 又 034 单 击 “ 确 定 ”按钮 ， 设 置 渐变 颜色 ， 将 “角度 ”设置 为 90" ， 如 图 14-96 所 示 。 
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图 14-95 设置 渐变 颜色 图 14-96 “渐变 琶 加 ”选项 
步 最 044 勾 选 “ 描 边 ” 复 选 框 ， 将 “大 小 ”设置 为 1， 颜色 设置 为 粉色 ， 如 图 14-97 所 示 。 


ET | [真是 9 下 


图 14-97 “ 描 边 ”选项 
步骤 054 单 击 “ 确 定 ” 按 钮 ， 设 置 图 层 样式 ， 效 果 如 图 14-98 所 示 。 
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图 14-98 设置 图 层 样式 


303 


( s IT 


步骤 06M 选择 工具 箱 中 的 “和 矩形” 工具， 在 窗口 中 绘制 矩形 ， 如 图 14-99 所 示 。 


a B's Hwee ee 


图 14-99 绘制 矩形 

步骤 07 人 执行 “图 层 ”|“ 图 层 样式 ”|“ 内 发 光 ” 命 令 ， 弹 出 “图 层 样式 ”对 话 框 ， 将 内 发 光 颜 
色 设置 为 白色 ， 如 图 14-100 所 示 。 

步骤 084 单 击 义 选 “渐变 得 加 ” 复 选 框 ， 设 置 渐变 颜色 ， 如 图 14-101 所 示 。 
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图 14-100 “内 发 光 ” 选 项 图 14-101 “渐变 登 加 ”选项 
步骤 09 4 单 击 “ 确 定 ” 按 钮 ， 设 置 渐变 颜色 ， 如 图 14-102 所 示 。 


图 14-102 ”设置 渐变 颜色 
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步骤 104 选择 工具 箱 中 的 “直线 ”工具 , 按 住 键盘 上 的 Shift 键 绘制 三 条 白色 的 直线 , 如 图 14-103 
所 示 。 
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图 14-103 ”绘制 直线 
工具 ， 在 窗口 中 输入 导航 文字 ， 如 图 14-104 所 示 。 


元 zs » a 3 三 三 三 Po 


步 又 114 选择 工具 箱 中 的 “ 横 排 文字 ” 


NA 


公司 简介 公司 新 闻 。 ”产品 展示 。 联系 我 们 


TMPANT 
| 


昌 


0 输入 文字 
14.5.2 ”实战 8 一 一 制作 透明 导航 


本 节 的 导航 条 为 透明 效果 ， 透 明 物 体 是 通过 背景 进行 参照 ， 体 现 出 质感 。 效 果 如 图 14-105 
所 示 ， 具 体操 作 步 又 如 下 。 


贩 给 教程 。。” 滤 镜 教程 。。 抠 图 教程 


图 14-105 透明 导航 
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最 终 文件 : 最 终 文件 /14/ 透 明 导航 .Psd 


步 又 014 打开 图 像 文件 123jpg， 选 择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 窗口 中 绘制 形状 ， 如 
图 14-106 所 示 。 


14-106 ”绘制 形状 


步骤 02 打开 “图 层 ” 面 板 ， 将 “填充 ”设置 为 0%， 按 键盘 中 的 CtrltEnter 键 将 其 转换 为 选区 ， 
如 图 14-107 所 示 。 


NPN NT 
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图 14-107 转换 选 
步骤 034 执行 “图 层 ”|“ 图 层 样式 ”|“ 内 发 光 ” 命 令 ， 弹 出 “图 层 样式 ”对 话 框 ， 将 “ 杂 色 ” 
设置 为 30%，“ 大 小 ”设置 为 10， 如 图 14-108 所 示 。 
步骤 044 义 选 “内 阴影 ” 复 选 框 ， 将 “不 透明 度 ” 设 置 为 40%，“ 距 离 ”设置 为 2，“ 大 小 ” 设 
置 为 3， 如 图 14-109 所 示 。 


[Edl 
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图 14-108 “内 发 光 ” 选 项 图 14-109 “内 阴影 ”选项 
步骤 054 勾 选 “投影 ” 复 选 框 ， 将 “距离 ”设置 为 7，“ 大 小 ”设置 为 8， 如 图 14-110 所 示 。 


图 14-110 “投影 ”选项 
步骤 064 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 效果 ， 如 图 14-111 所 示 。 


图 14-111 设置 


层 样式 效果 
步骤 07 人 选择 工具 箱 中 的 “ 横 排 文 字 ” 工 具 ， 在 窗口 中 输入 文字 “首页 ”， 如 图 14-112 所 示 。 
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图 14-112 输入 文字 


步 邓 08 重复 步骤 1~7， 制 作 其 余 的 6 个 导航 按钮 和 输入 相应 的 导航 文本 ， 效 果 如 图 14-113 
所 示 。 
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图 14-113 ”制作 其 余 导航 按钮 
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本 章 导读 


Adobe Flash CC 官方 简体 中 文 版 是 用 于 创建 动画 和 多 媒体 内 容 的 强大 制作 平台 。Flash 的 
功能 很 广泛 ， 可 以 生成 动画 、 创 建 网 页 互动 性 ， 以 及 在 网 页 中 加 入 声音 ， 还 可 以 生成 亮丽 夺目 
的 图 形 和 界面 。 绘 图 工具 是 学 习 Flash 的 关键 ， 在 学 习 和 使 用 过 程 中 ， 应 当 灵 活 地 运用 这 些 工 
具 ， 可 以 绘制 出 棚 棚 如 生 的 失 量 图 ， 为 后 面 的 动画 制作 做 好 准备 工作 。 


Flash CC 简介 
Flash CC 的 工作 界面 
绘制 图 形 工具 
选择 对 象 工具 
编辑 图 形 工具 
文本 工具 的 基本 使 用 


实例 展示 


浪漫 七 夕 


QIXIQINGRENJIE 


发 光 文本 绘制 向 日 葵花 


15.1 Flash CC 简介 


在 浏览 网 页 的 时 候 ， 浏 览 者 的 视线 总 会 不 由 自主 地 被 那些 美丽 动画 所 吸引 。 同 时 ， 又 会 忍 不 


住 好 奇 地 想 知道 这 些 动画 是 用 什么 软件 制作 出 来 的 ， 这 就 是 专门 的 动画 制作 软件 一 一 Flash， 使 用 
它 制 作出 来 的 动画 被 称 为 Flash 动画 。Flash 软件 是 目前 应 用 最 广泛 的 动画 制作 软件 之 一 ， 主 要 用 


于 制作 网 页 、 宣 传 广告 、 多 媒体 课件 、 小 游戏 、MTV 和 小 动画 等 。 
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Flash 以 其 强大 的 功能 ， 易 于 上 手 的 特性 ， 得 到 了 广大 用 户 的 认可 ， 甚 至 于 疯狂 的 热爱 ， 很 
多 人 已 投入 到 Flash 动画 的 制作 中 。 作 为 一 款 动画 制作 软件 ，Flash 与 其 他 动画 制作 软件 有 很 多 相 
似 的 地 方 ， 但 也 有 很 多 特点 ， 正 是 这 些 特点 成 就 了 Flash 在 网 络 动画 领域 的 王者 地 位 。 


1. 文件 占用 空间 小 ， 传 输 速度 快 


Flash 动画 的 图 形 系统 是 基于 矢量 技术 的 ， 因 此 下 载 一 个 Flash 动画 文件 很 快 。 矢 量 技术 只 需 
存储 少量 数据 就 可 以 描述 一 个 相对 复杂 的 对 象 ， 与 以 往 采用 的 位 图 相 比 数据 量 大 大 下 降 了 ， 只 有 
原先 的 几 千 分 之 一 。 因 此 ， 比 较 适合 在 因特网 中 使 用 ， 它 有 效 地 解决 了 多 媒体 与 大 数据 量 之 间 的 
矛盾 。 


2. 强大 的 交互 功能 


在 Flash 中 , 高 级 交互 事件 的 行为 控制 使 Flash 动画 的 播放 更 加 精确 并 容易 控制 。 设 计 者 可 以 
在 动画 中 加 入 滚动 条 、 复 选 框 、 下 拉 菜 单 和 拖 动物 体 等 各 种 交互 组 件 。Flash 动画 甚至 可 以 与 Java 
或 其 他 类 型 的 程序 融合 在 一 起 ， 在 不 同 的 操作 平台 和 浏览 器 中 播放 。Flash 还 支持 表单 交互 ,使 得 
包含 Flash 动画 表单 的 网 页 可 应 用 于 流行 的 电子 商务 领域 。 


3. 矢量 绘图 ， 可 无 极限 放大 


由 于 矢量 图 形 的 特点 ，Flash 做 到 了 真正 的 无 极限 放大 ， 放 大 几 倍 、 几 百倍 都 一 样 的 清晰 ， 
无 论 用 户 的 浏览 器 使 用 多 大 的 窗口 ， 都 不 会 降低 画面 质量 。 

一 般 的 网 页 动画 图 像 是 基于 点 阵 技术 的 位 图 图 像 , 这 种 图 像 由 大 量 的 像素 点 构成 ,比较 逼真 ， 
但 灵活 性 较 差 ， 并 且 在 对 图 像 进行 放大 时 ， 由 于 点 与 点 之 间距 离 的 增加 ， 图 像 的 品质 会 有 较 大 幅 
度 的 降低 ， 会 产生 锯齿 状 的 像素 块 。 而 Flash 最 重要 的 特点 之 一 就 是 能 用 矢量 绘图 ， 只 需要 少量 
的 矢量 数据 就 可 以 很 好 地 描述 一 个 复杂 的 对 象 。 由 于 位 图 图 像 是 由 像素 组 成 的 ， 所 以 其 体积 非常 
大 ; 而 矢量 图 像 仅 由 线条 和 线条 所 封闭 的 填充 区 域 组 成 ， 体 积 非 常 小 。 此 外 ，Flash 动画 采用 “ 流 
式 ” 播 放 技术 ， 在 观看 动画 时 可 以 不 必 等 到 动画 文件 全 部 下 载 到 本 地 后 才能 观看 ， 而 可 以 边 观 看 
边 下 载 ， 从 而 减少 了 等 待 的 时 间 。 


4. 动画 的 输出 格式 


Flash 是 一 个 优秀 的 图 形 动画 文件 的 格式 转换 工具 ， 它 可 以 将 动画 以 GIF、QuickTime 和 AVI 

的 文件 格式 输出 ， 也 能 以 帧 的 形式 将 动画 插入 到 Director 中 去 。 
Flash 能 够 以 下 面 所 列 的 文件 格式 输出 动画 。 

SWF: Flash 动画 文件 或 Flash 模板 文件 。 

SPL: Future Splash 动画 文件 。 

GIF: 动画 GIF 文件 。 

AI: Adobe Illustrator 矢量 文件 格式 。 

BMP: Windows 位 图 文件 格式 。 

JPG: JPG 位 图 文件 格式 。 

PNG: 可 移植 的 网 络 图 像 文件 格式 。 

AVI: Windows 视频 文件 。 
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MOV: QuickTime 视频 文件 。 

MAV: 视频 文件 。 

EMF: EMF 文件 格式 。 

WMF: Windows Metafile 文件 格式 。 
EPS: EPS 文件 格式 。 

DXF: AutoCAD DXF 文件 格式 。 


5. 界面 友好 ， 易 于 上 手 

Flash 不 但 功能 强大 ， 且 有 合理 的 布局 ， 使 得 初学 者 可 以 在 很 短 的 时 间 内 熟悉 它 的 工作 界面 。 
同时 软件 附带 了 详细 的 帮助 文件 和 教程 ， 并 有 示例 文件 供用 户 研究 学 习 ， 非 常 实用 。 

Flash 将 矢量 图 形 与 位 图 、 声 音 以 及 脚本 控制 巧妙 结合 ， 能 创作 出 效果 绚丽 多 彩 的 动画 作品 。 

6. 可 扩展 性 

通过 第 三 方 开发 的 Flash 插件 程序 ， 可 以 方便 地 实现 一 些 以 往 需要 非常 繁琐 的 操作 才能 实现 
的 动态 效果 ， 大 大 提高 了 Flash 影片 制作 的 工作 效率 。 


15.2 Flash CC 的 工作 界面 


Adobe 公司 发 布 的 Flash CC 中 文正 式 版 ， 其 界面 清新 简洁 友好 ， 用 户 能 在 较 短 的 时 间 内 掌握 
软件 的 使 用 。Flash CC 可 以 实现 多 种 动画 特效 ， 是 由 一 帧 帧 的 静态 图 片 在 短 时 间 内 连续 播放 而 造 
成 的 视觉 效果 ， 表 现 为 动态 过 程 ， 能 满足 用 户 的 制作 需要 。 


Flash CC 的 工作 界面 由 菜单 栏 、 工 具 箱 、 时 间 轴 、 舞 台 和 面板 等 组 成 ， 如 图 15-1 所 示 。 


菜单 栏 ET FE 
时 间 轴 一 一 是 
2 
工具 箱 2 面板 组 
- 
舞台 
属性 面板 


图 15-1 Flash CC 的 工作 界面 
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15.2.| 菜单 栏 


菜单 栏 是 最 常见 的 界面 要 素 ， 它 包括 “文件 "、“ 编 辑 "、“ 视 图 "、“ 插 入 "、“ 修 改 "、“ 文 本 ”、 
“命令 “控制 “调试 “窗口 ”和 “帮助 ”等 一 系列 的 菜单 ， 如 图 15-2 所 示 。 根 据 不 同 的 功 
能 类 型 ， 可 以 快速 地 找到 所 要 使 用 的 各 项 功能 选项 。 


图 15-2 菜单 栏 


@ “文件 ”菜单 : 用 于 文件 操作 ， 如 创建 、 打 开 和 保存 文件 等 。 

@ “编辑 ”菜单 : 用 于 动画 内 容 的 编辑 操作 ， 如 复制 、 剪 切 和 粘贴 等 。 

@ “视图 ”菜单 : 用 于 对 开发 环境 进行 外 观 和 版 式 设置 ， 包 括 放大 、 缩 小 、 显 示 网 格 和 辅助 
线 等 。 

@ “插入 ”菜单 : 用 于 插入 性 质 的 操作 ， 如 新 建 元 件 、 插 入 场景 和 图 层 等 。 

@ “修改 ”菜单 : 用 于 修改 动画 中 的 对 象 、 场 景 甚至 动画 本 身 的 特性 ， 主 要 用 于 修改 动画 中 

各 种 对 象 的 属性 ， 如 帧 、 图 层 、 场 景 以 及 动画 本 身 等 

“文本 ”菜单 : 用 于 对 文本 的 属性 进行 设置 。 

“命令 ”菜单 : 用 于 对 命令 进行 管理 。 

“控制 ”菜单 : 用 于 对 动画 进行 播放 、 控 制 和 测试 。 

“调试 ”菜单 : 用 于 对 动画 进行 调试 。 

“窗口 ”菜单 : 用 于 打开 、 关 闭 、 组 织 和 切换 各 种 窗口 面板 。 

“帮助 ”菜单 : 用 于 快速 获得 帮助 信息 。 


15.2.2 ”舞台 


舞台 是 放置 动画 内 容 的 区 域 ， 可 以 在 其 中 绘制 或 编辑 图 形 。 舞 台 之 外 的 灰色 称 为 工作 区 ， 在 
播放 动画 时 不 显示 此 区 域 ， 如 图 15-3 所 示 。 


图 15-3 ”舞台 
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15.2.3 工具 箱 


工具 箱 中 包含 一 套 完整 的 绘图 工具 ， 位 于 工作 界面 的 

左 侧 ， 如 图 15-4 所 示 。 如 果 想 将 工具 箱 变 成 浮动 工具 箱 ， 

可 以 拖 动工 具 箱 最 上 方 的 位 置 ， 这 时 屏幕 上 会 出 现 一 个 工 

具 箱 的 虚 框 ， 释 放 鼠 标 即 可 将 工具 箱 变 成 浮动 工具 箱 。 

“选择 " 工具 国 : 用 于 选择 对 象 、 拖 动 对 象 等 操作 。 

“部 分 选取 ”工具 国 : 可 以 选择 对 象 的 部 分 区 域 。 

“任意 变形 ”工具 国 : 对 选择 的 对 象 进行 变形 。 

“3D 旋转 ”工具 国 : 3D 旋转 功能 只 能 对 影片 剪辑 

发 生 作用 。 

e。 “ 套 索 ”工具 国 : 选择 一 个 不 规则 的 图 形 区 域 ， 并 
且 还 可 以 处 理 位 图 图 形 。 

@ “钢笔 ”工具 国 : 可 以 使 用 此 工具 绘制 曲线 。 

@ “文本 ”工具 国 : 在 舞台 上 添加 文本 ， 编 辑 现 有 的 
文本 。 

e。 “线条 ”工具 辆 : 使 用 此 工具 可 以 绘制 各 种 形式 的 图 15-4 工具 箱 

线条 。 

“和 形 ”工具 国 : 用 于 绘制 矩形 ， 也 可 以 绘制 正方 形 。 

“椭圆 ”工具 国有 绘制 的 图 形 是 椭圆 或 国 形 图 案 。 

“多 角 星 形 ” 工 具 国 : 用 于 绘制 多 角 星 形 ， 也 可 以 绘制 五 角 星 。 

“铅笔 ”工具 国 : 用 于 绘制 折线 、 直 线 等 。 

“刷子 ”工具 辆 :用 于 绘制 填充 图 形 。 

“ 黑 水 瓶 ”工具 国 : 用 于 编辑 线条 的 属性 . 

“ 闫 料 桶 ”工具 国 : 用 于 编辑 填充 区 域 的 颜色 。 

“ 滴 管 ”工具 圈 : 用 于 将 图 形 的 填充 颜色 或 线条 属性 复制 到 别 的 图 形 线条 上 ， 还 可 以 采集 

位 图 作为 填充 内 容 。 

“橡皮 擦 ”工具 轿 : 用 于 擦 除 舞 台 上 的 内 容 。 

“ 手 形 ” 工 具 必 ， 当 兽 台 上 的 内 容 较 多 时 ， 可 以 用 该 工具 平移 舞台 以 及 各 个 部 分 的 内 容 。 

“缩放 ”工具 国 : 用 于 缩放 和 舞台 中 的 图 形 。 

“笔触 颜色 ”工具 回 加 用 于 设置 线条 的 颜色 。 

“填充 颜色 ”工具 国 国 用 于 设置 图 形 的 填充 区 域 。 


15.2.4 ”时间 轴 


在 “时 间 轴 ”面板 中 ， 其 左边 的 上 方 和 下 方 的 几 个 按钮 用 于 调整 图 层 的 状态 和 创建 图 层 。 在 
帧 区 域 中 ， 其 顶部 的 标题 指示 了 帧 编号 ， 动 画 播放 头 指示 了 舞台 中 当前 显示 的 帧 。 
时 间 轴 状态 显示 在 “时 间 轴 ”面板 的 底部 ， 它 包括 若干 用 于 改变 帧 显示 的 按钮 ， 指 示 当 前 帧 
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编号 、 帧 频 和 到 当前 帧 为 止 的 播放 时 间 等 。 其 中 ， 帧 频 直 接 影响 动画 的 播放 效果 ， 其 单位 是 “ 帧 / 
秒 (fps)”， 默 认 值 是 12 帧 / 秒 。 

“时 间 轴 ”面板 是 Flash 界面 中 重要 的 部 分 , 用 于 组 织 和 控制 文档 内 容 在 一 定时 间 内 播放 的 图 
层 数 和 帧 数 ， 如 图 15-5 所 示 。 


图 15-5 “时 间 轴 ”面板 
15.2.5 ”属性 面板 


“属性 ”面板 默认 情况 下 处 于 展开 状态 。 在 Flash CC 中 ,“ 属 性 ”面板 、“ 滤 镜 ” 面 板 和 “人参 
数 ” 面 板 整合 到 了 一 个 面板 。 

“属性 ”面板 的 内 容 取 决 于 当前 选 定 的 内 容 ， 可 以 显示 当前 文档 、 文 本 、 元 件 、 形 状 、 位 图 、 
视频 、 帧 或 工具 的 信息 和 设置 。 如 当选 择 工具 箱 中 的 “文本 ”工具 时 ， 在 “属性 ”面板 中 将 显示 
有 关 文本 的 一 些 属性 设置 ， 如 图 15-6 所 示 。 


图 15-6 “属性 ”面板 


15.3 ”绘制 图 形 工具 


使 用 Flash 工具 箱 中 的 各 种 工具 绘制 晕 真 的 图 形 ， 本 节 讲述 基本 的 绘图 工具 的 使 用 。 
15.3.1 线条 工具 


“线条 ”工具 在 Flash 软件 中 不 仅仅 是 画 线 这 样 简单 ,在 动画 制作 中 经 常 要 用 到 “ 线 ” 的 使 用 。 
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在 工具 箱 中 选择 “线条 ”工具 ， 这 时 鼠标 移动 到 工作 区 后 将 变 成 一 个 十 字 ， 说 明 此 时 已 经 激活 了 
工具 ， 如 图 15-7 所 示 。 在 “属性 ”面板 中 可 设置 线条 的 属性 ， 如 图 15-8 所 示 。 


15-7 选择 “线条 ”工具 图 15-8 ”线条 的 属性 
在 “属性 ”面板 中 可 以 设置 以 下 参数 。 
@ 笔触: 用 于 设置 线条 的 粗细 。 
@ 样式 : 包括 “ 极 细 线 ”"、“ 实 线 ”"、“ 虚 线 ”"、“ 点 状 线 ”"、 “锯齿 状 ”"、“ 点 刻 线 ” 和 “斑马 线 ” 
6 个 选项 。 
@ 缩放 : 勾 选 此 复 选 框 ， 可 以 将 自 定义 笔触 缩放 倍数 。 
@ 类 角 : 设置 类 角 大 小 。 
下 面 通过 实例 讲述 线条 工具 的 具体 应 用 ， 操 作 步 骤 如 下 。 
步 又 014 启动 Flash CC， 执 行 “ 文 件 ”|“ 打 开 ” 命 令 ， 打 开 图 像 文 件 ， 如 图 15-9 所 示 。 
步 又 024 选择 工具 箱 中 的 “线条 ”工具 ， 在 时 间 轴 中 单 击 “ 新 建 图 层 ” 按 钮 ， 新 建 图 层 2， 如 图 
15-10 所 示 。 


15-9 打开 图 像 文件 图 15-10 新建 图 层 2 


步骤 034 打开 “属性 ”面板 ， 将 笔触 颜色 设置 为 绿色 ， 笔 触 大 小 设置 为 30，“ 样 式 ” 选 择 “ 斑 
马 线 ”， 如 图 15-11 所 示 。 
步 肾 044 在 舞 全 中 按 住 鼠 标 左 键 即 可 绘制 线条 ， 如 图 15-12 所 示 。 
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/二 委 I 


填充 和 芝 般 


图 15-11 设置 “属性 ”面板 图 15-12 绘制 线条 
15.3.2 ”椭圆 工具 与 矩形 工具 


本 节 主 要 学 习 一 下 矩形 工具 和 椭圆 工具 的 使 用 技巧 。“ 和 矩形 ”工具 用 于 创建 各 种 比例 的 矩形 ， 
也 可 以 绘制 正方 形 ， 其 操作 步骤 和 “椭圆 ”工具 相似 。 所 不 同 的 是 ， 在 矩形 面板 中 可 以 设置 矩形 
的 边 角 半 径 ， 如 图 15-13 所 示 就 是 “椭圆 ”工具 的 “属性 ”面板 和 图 15-14 所 示 的 是 “矩形 ” 工 
具 的 “属性 ”面板 。 


EL 


图 15-13 “椭圆 ”工具 的 “属性 ”面板 图 15-14 “ 德 形 ”工具 的 “属性 ”面板 
下 面 讲 述 矩 形 工具 和 椭圆 工具 的 简单 绘制 ， 具 体操 作 步 骤 如 下 。 


步骤 014 启动 Flash CC， 新 建 空 白文 档 ， 执 行 “文件 ”|“ 导 入 ”|“ 导 入 到 舞台 ”命令 ， 导 入 图 
像 文件 ， 如 图 15-15 所 示 。 

步骤 024 在 时 间 轴 面板 中 单 击 “ 新 建 图 层 ”按钮 ， 新 建 图 层 2， 如 图 15-16 所 示 。 

步骤 034 选择 工具 箱 中 的 “椭圆 ”工具 ， 在 “属性 ”面板 中 将 填充 颜色 设置 为 浅黄 色 ，“ 开 始 
角度 ”设置 为 15，“ 内 径 ” 设置 为 10， 如 图 15-17 所 示 。 

步骤 044 单 击 舞台 中 按 住 鼠 标 左 键 绘制 桶 圆 ， 如 图 15-18 所 示 。 
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图 15-15 导入 图 像 文件 15-16 新建 图 层 2 


图 15-17 设置 属性 面板 图 15-18 ”绘制 椭圆 
步骤 054 选择 工具 箱 中 的 “和 矩形” 工具， 在 “属性 ”面板 中 将 填充 颜色 设置 为 黄色 ，“ 笔 触 颜 
色 ” 设 置 为 浅黄 色 ，“ 和 矩形 选项 ”设置 为 10， 如 图 15-19 所 示 。 
步 最 064 在 舞台 中 按 住 鼠 标 左 键 绘制 矩形 ， 如 图 15-20 所 示 。 


图 15-19 设置 属性 面板 图 15-20 ”绘制 矩形 
15.2.3 ”多 角 星 形 工具 


“多 角 星 形 工具 ”是 Flash 中 非常 重要 的 绘图 工具 ， 可 以 利用 它 绘制 许多 形状 不 同 的 星 形 和 多 
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边 形 图 形 。 

“多 角 星 形 工具 ”的 使 用 方法 与 “矩形 工具 ”相同 。 在 绘制 多 角 星 形 的 时 候 ， 可 以 旋转 鼠标 
来 改变 星 形 项 点 的 朝向 。 

“多 角 星 形 工具 ”的 属性 面板 比 “ 和 矩形 工具 ”的 属性 面板 多 了 一 个 “选项 ”按钮 ， 单 击 该 按 
钮 ， 会 弹出 “工具 设置 ”对 话 框 ， 如 图 15-21 所 示 。 


图 15-21 “工具 设置 ”对 话 框 

在 “工具 设置 ”对 话 框 中 可 以 更 改 多 角 星 形 的 样式 ， 有 星 形 和 多 边 形 这 两 种 样式 供 选择 ， 边 
数 的 设置 范围 为 3~32; 设置 星 形 项 点 大 小 选项 , 可 以 更 改 星 形 项 点 角度 的 大 小 , 取 值 范围 是 0~1。 

运用 不 同 设置 做 出 的 星 形 和 多 边 形 ， 还 可 以 做 出 更 多 种 类 的 星 形 和 多 边 形 ， 具 体操 作 步 
又 如 下 。 
步骤 01 启动 Flash CC， 新 建 空 白文 档 ， 执 行 “文件 ”|“ 导 入 ”|“ 导 入 到 舞台 ”命令 ， 导 入 图 

像 文件 ， 如 图 15-22 所 示 。 

步 又 024 单 击 “ 时 间 轴 ”面板 中 的 “新 建 图 层 ”按钮 ， 新 建 图 层 2， 如 图 15-23 所 示 。 
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图 15-22 导入 图 像 文 件 图 15-23 ”新 建 图 层 2 


步 曼 034 选择 工具 箱 中 的 “多 角 星 形 ”工具 ， 在 “属性 ”面板 中 设置 填充 颜色 和 笔触 颜色 ， 单 
击 底部 的 “选项 ”按钮 ， 如 图 15-24 所 示 。 
步骤 044 弹出 “工具 设置 ” 对话 框 ， 单 击 “ 样 式 ”下拉 列 表 选 中 “ 星 形 ” 选 项 ， 如 图 15-25 所 示 。 


318 


第 15 章 Flash CC 绘图 基础 (9 


工具 设置 


样式 


i 


星 形 项 点 大 小 


15-24 单 击 “ 选 项 ”按钮 图 15-25 “工具 设置 ”对 话 框 
步骤 054 单 击 “ 确 定 ” 按 钮 , 设置 工具 选项 , 在 有 舞台 中 按 住 鼠 标 左 键 绘制 星 形 ， 如 图 15-26 所 示 。 


se 


PRESS 


3 Bpvr、 ee 


3 河 


15-26 ”绘制 星 形 
15.3.4 ”铅笔 工具 


“铅笔 ”工具 可 以 绘制 任意 形状 的 线条 ， 选 择 工 具 箱 中 的 “铅笔 ”工具 会 出 现 “ 铅 笔 模式 ” 
附属 工具 选项 ， 有 3 种 模式 可 供 选择 ， 如 图 15-27 所 示 。 通 过 它 可 以 选择 Flash 修改 所 绘 笔触 的 
模式 。 


图 15-27 “铅笔 模式 ”附属 工具 选项 
@ 伸 直 : 适用 于 绘制 矩形 、 椭 圆 等 规则 图 形 。 当 所 画 的 图 形 接近 拢 形 或 圆 形 时 ， 将 自动 转换 
为 矩形 或 圆 形 。 
@ 平滑 : 适用 于 绘制 平滑 的 图 形 。 使 用 “平滑 ”模式 绘制 的 图 形 会 自动 去 掉 棱 角 ， 使 图 形 尽 
量 平滑 。 
@ 墨水 : 适用 于 手绘 图 形 。 用 “墨水 ”模式 画 出 来 的 图 形 轨 迹 即 为 最 终 的 图 形 。 
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使 用 “铅笔 ”工具 绘制 图 形 的 具体 操作 步骤 如 下 。 


步 又 014 启动 Flash CC， 新 建 空 白文 档 并 导入 图 像 文件 ， 单 击 “ 时 间 轴 ”面板 中 的 “新 建 图 层 ” 
按钮 ， 新 建 图 层 2， 如 图 15-28 所 示 。 

步骤 024 选择 工具 箱 中 的 “铅笔 ” 工具， 在 “属性 ”面板 中 将 笔触 颜色 设置 为 浅黄 色 ，“ 样 式 ” 
设置 为 “虚线 ”， 如 图 15-29 所 示 。 
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图 15-28 ”新 建 图 层 2 图 15-29 设置 “铅笔 ”工具 属性 
步骤 034 在 工具 箱 中 选择 “ 伸 直 ” 模式， 在 舞台 中 按 住 鼠 标 左 键 绘制 圆 形 ， 如 图 15-30 所 示 。 


15-30 ”绘制 圆 形 


15.3.5 刷子 工具 


工具 箱 中 的 “刷子 ”工具 可 以 随意 地 画 出 色 块 ， 在 其 选项 中 可 以 设置 刷子 的 大 小 和 样式 ， 如 
图 15-31 所 示 。 单 击 “ 选 项 ”区 中 的 按钮 ， 在 弹出 的 菜单 中 有 5 种 填充 模式 ， 如 图 15-32 所 示 。 
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15-31 “刷子 ”大 小 图 15-32 ”填充 模式 
@ ”标准 绘画 : 使 用 工具 箱 中 的 “刷子 ”工具 ， 设 置 填充 颜色 ， 将 光标 移动 到 舞台 上 ， 在 舞台 
中 按 住 息 标 左 键 可 以 进行 拖 动 。 


颜料 填充 : 它 只 影响 填 色 的 内 容 ， 不 会 遮 住 线条 。 
后 面 绘画 : 在 图 形 上 画 ， 它 只 会 在 图 形 的 后 面 ， 不 会 影响 前 面 的 图 像 。 
顾 料 选择 : 使 用 “选择 ”工具 选择 图 形 的 一 部 分 区 域 ， 再 使 用 刷子 工具 绘制 。 
内 部 绘画 : 在 绘画 时 ， 和 画笔 的 起 始点 必须 是 在 轮廓 线 以 内 ,而 且 和 画布 的 范围 也 只 作用 中 轮 
廊 线 以 内 。 
使 用 “刷子 ”工具 的 具体 操作 步骤 如 下 。 
步骤 01 启动 Flash CC， 新 建 空白 文档 并 导入 图 像 文 件 ， 单 击 “ 新 建 图 层 ”按钮 ， 新 建 图 层 2， 
如 图 15-33 所 示 。 
步骤 024 选择 工具 箱 中 的 “画笔 ”工具 ， 在 工具 箱 中 设置 画笔 样式 和 画笔 大 小 ， 在 舞台 中 按 住 
鼠标 左 键 绘制 形状 ， 如 图 15-34 所 示 。 


图 15-33 新建 图 层 2 图 15-34 ”绘制 形状 
15.3.6 ”钢笔 工具 
“钢笔 ”工具 用 于 绘制 路 径 ， 可 以 创建 直线 或 曲线 段 ， 然 后 调整 直线 段 的 角度 、 长 度 以 及 曲 


线段 的 斜率 。 
选择 工具 条 中 “钢笔 ”工具 ， 在 舞台 上 单 击 确定 一 个 锚 记 点 ， 继 续 单 击 添加 相连 的 线段 。 直 
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线路 径 上 或 曲线 路 径 结合 处 的 锚 记 点 被 称 为 转角 点 ， 以 小 方形 显示 ， 如 图 15-35 所 示 。 


图 15-35 选择 合并 命令 


15.4 选择 对 象 工具 


在 Flash 中 若 要 修改 一 个 对 象 ， 先 选择 它 。 可 以 使 用 选择 工具 、 部 分 选择 工具 来 选择 对 象 。 
15.4.1 选择 工具 


“选择 ”工具 用 于 选择 或 移动 直线 、 图 形 、 元 件 等 一 个 或 多 个 对 象 ， 也 可 以 拖 动 一 些 未 选 定 
的 直线 、 图 形 、 端 点 或 曲线 来 改变 直线 或 图 形 的 形状 。 
“选择 ”工具 有 3 个 附属 工具 选项 ， 如 图 15-36 所 示 。 


图 15-36 附属 工具 
@ 贴 紧 至 对 象 : 选择 此 选项 ， 绘 图 、 移 动 、 旋 转 以 及 调整 的 对 象 将 自动 对 齐 。 
@ 平滑 : 对 直线 和 开头 进行 平滑 处 理 。 
@ 伸 直 : 对 直线 和 开头 进行 平 直 处 理 。 
使 用 “选择 ”工具 的 具体 操作 步骤 如 下 。 


步骤 014 在 工具 箱 中 单 击 “ 选 择 ” 工 具 ， 直 接 单 击 相 应 的 对 象 即 可 ， 如 图 15-37 所 示 。 
步骤 02 按 住 Shift 键 单 击 其 他 对 象 ， 可 以 选中 多 个 对 象 ， 如 图 15-38 所 示 。 
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图 15-37 单 击 选择 对 象 图 15-38 ”选中 多 个 对 象 


15.4.2 ”部 分 选取 工具 


部 分 选取 工具 ， 可 以 对 此 对 象 进行 多 角度 的 修改 。 下 面 讲述 部 分 选取 工具 的 应 用 ， 有 具体 操作 
步骤 如 下 。 
步骤 O01 启动 Flash CC， 新 建 空白 文档 ， 选 择 工具 箱 中 的 “椭圆 ”工具 ， 将 填充 颜色 设置 黄色 ， 
在 舞台 中 按 住 鼠 标 左 键 绘制 椭圆 ， 如 图 15-39 所 示 。 
步骤 024 选择 工具 箱 中 的 “部 分 选取 ”工具 并 在 有 舞台 中 单 击 ， 它 的 图 像 轮廓 线 上 将 出 现 很 多 控 
制 点 ， 表 示 该 对 象 已 被 选中 ， 如 图 15-40 所 示 。 


图 15-39 ”绘制 椭圆 图 15-40 选择 椭圆 
步骤 034 选择 其 中 一 个 控制 点 ， 此 时 光标 右 下 角 会 出 现 一 个 空白 的 正方 形 ， 拖 动 该 点 ， 轮 廓 会 
随 之 改变 ， 如 图 15-41 所 示 。 
步骤 044 将 “部 分 选取 ”工具 靠近 对 象 时 ， 当 光标 右 下 角 出 现 黑 色 实心 方块 的 时 候 ， 按 下 鼠标 
左 键 就 可 以 拖 动 对 象 了 ， 如 图 15-42 所 示 。 
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图 1541 改变 轮廓 图 15-42 ” 拖 动 对 象 


15.5 ”编辑 图 形 颜色 工具 


Flash 提供 了 多 种 设置 和 修改 颜色 的 方法 ， 添 色 工具 主要 包括 “颜料 桶 ”工具 、“ 墨 水瓶” 工 
具 、“ 滴 管 ” 工具， 下 面 将 详细 介绍 它们 的 使 用 方法 。 
15.5.1 ”颜料 桶 工具 


“颜料 桶 ”工具 是 用 来 填充 封闭 区 域 的 ， 它 既 能 填充 一 个 空白 区 域 ， 又 能 改变 已 着 色 区 域 的 
颜色 ， 可 以 使 用 纯色 、 渐 变 和 位 图 填充 ， 甚 至 可 以 用 “颜料 桶 ”工具 对 一 个 未 完全 封闭 的 区 域 进 


行 填充 。 = 〇 不 封闭 空隙 
在 工具 箱 中 选择 “颜料 桶 ” 工具 , 单 击 工具 箱 中 的 “ 空 封闭 内 了 
阶 大 小 ”按钮 ， 在 弹出 的 菜单 中 可 以 设置 填充 的 属性 ， 包 CD 封 间 中 等 空 了 
括 “ 不 封闭 空 阶 ”、“ 封 闭 小 空 阶 ”、“ 封 闭 中 等 空隙” 和 “ 圭 be 
闭 大 空 阶 ”4 个 选项 ， 如 图 15-43 所 示 。 图 15-43 填充 属性 


@ 不 封闭 空隙 : 在 使 用 颜料 桶 填充 颜色 前 ，Flash 将 不 会 自行 封闭 所 选区 域 的 任何 空隙 。 也 
就 是 说 ， 所 选区 域 的 所 有 未 封闭 的 曲线 内 将 不 会 被 填 色 。 

@ 封闭 小 空 阶 : 在 使 用 颜料 桶 填充 颜色 前 ， 会 自行 封闭 所 选区 域 的 小 空隙 。 也 就 是 说 ， 如 果 
所 填充 区 域 不 是 完全 封闭 的 ， 但 是 空隙 很 小 ， 则 Flash 会 近似 地 将 其 判断 为 完全 封闭 而 进 
行 填充 。 

@ 封闭 中 等 空隙: 在 使 用 颜料 桶 填充 颜色 前 ， 会 自行 封闭 所 选区 域 的 中 等 空 阶 。 也 就 是 说 ， 
如 果 所 填充 区 域 不 是 完全 封闭 的 ， 但 是 空 阶 大 小 中 等 ， 则 Flash 会 近似 地 将 其 判断 为 完全 
封闭 而 进行 填充 。 

@ 封闭 大 空 陈 : 在 使 用 颜料 桶 填充 颜色 前 ， 自 行 封闭 所 选区 域 的 大 空隙 。 也 就 是 说 ， 如 果 所 
填充 区 域 不 是 完全 封闭 的 ， 而 且 空 陈 尺 寸 比 较 大 ， 则 Flash 会 近似 的 将 其 判断 为 完全 封闭 
而 进行 填充 。 
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使 用 “颜料 桶 ”工具 的 具体 操作 步骤 如 下 。 
步 又 014 启动 Flash CC, 新 建 空白 文档 , 在 舞台 中 按 住 鼠标 左 键 绘制 绿色 椭圆 , 如 图 15-44 所 示 。 
步骤 024 选择 颜料 桶 工具 ， 将 光标 指针 移 到 舞 人 台中， 在 填充 区 域内 部 单 击 ， 填 充 颜 色 ， 或 者 在 
轮 廊 内 单 击 填充 ， 如 图 15-45 所 示 。 


15-44 ”绘制 椭圆 图 15-45 更 改 填充 颜色 


15.5.2 ”墨水 瓶 工具 


“墨水 瓶 ” 工 具 用 来 在 绘图 中 更 改线 条 和 轮廓 线 的 颜色 与 样式 。 它 不 仅 能 够 在 选 定 图 形 的 轮 
廓 线 上 加 上 规定 的 线条 ， 还 可 以 改变 一 条 线段 的 粗细 、 颜 色 和 线 型 等 ， 并 且 可 以 给 打 散 后 的 文字 
和 图 形 加 上 轮廓 线 。 

步骤 014 选择 工具 箱 中 的 “墨水 瓶 ” 工 具 ， 将 鼠标 指针 移 到 舞台 中 ， 将 发 现 它 变 成 了 一 个 墨水 
瓶 形状 ， 表 明 此 时 已 经 激活 了 “墨水 瓶 ” 工 具 ， 在 “属性 ”面板 中 设置 想 要 的 参数 ， 
如 图 15-46 所 示 。 

步骤 024 给 无 轮 廊 图形 添加 了 轮廓 ， 使 用 “墨水 瓶 ” 工 具 在 舞 合 中 单 击 改变 轮廓 线 颜 色 ， 如 图 


15-47 所 示 。 


图 15-46 激活“ 墨 水瓶 ”工具 图 15-47 改变 轮廓 线 颜色 
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15.5.3” 滴 管 工具 


“ 滴 管 ”工具 是 吸取 某 种 对 象 颜色 的 管状 工具 ， 应 用 “ 滴 管 ”工具 可 以 获取 需要 的 颜色 ， 另 
外 还 可 以 对 位 图 进行 属性 采样 。 使 用 “ 滴 管 ”工具 的 具体 操作 步骤 如 下 。 


步骤 014 打开 原始 文件 ， 执 行 “ 修 改 ”| “分离 ”命令 ， 将 图 像 打 散 ， 如 图 15-48 所 示 。 

步骤 024 选择 工具 箱 中 的 “ 滴 管 ”工具 ， 将 “ 滴 管 ”工具 放置 在 要 复制 其 属性 的 填充 上 ， 这 时 
在 “ 滴 管 ”工具 的 旁边 出 现 了 一 个 刷子 图 标 ， 单 击 鼠 标 则 将 形状 信息 采样 到 填充 工具 
中 ， 如 图 15-49 所 示 。 


图 15-48 ” 打 散 图 像 图 15-49 采集 填充 


步骤 034 选择 工具 箱 中 的 “和 矩形 ”工具 ， 在 舞 合 中 绘制 一 个 矩形 ， 该 矩形 将 具有 “ 滴 管 ”工具 
所 提取 的 填充 属性 ， 如 图 15-50 所 示 。 


图 15-50 填充 属性 


15.5.4 ”橡皮 擦 工具 


“橡皮 擦 工具 ”用 于 清除 图 形 中 多 余 或 错误 的 部 分 ， 是 绘图 编辑 中 常用 的 辅助 工具 。 与 “ 刷 


326 


第 15 章 Flash CC 绘图 基础 


子 工具 ”一 样 ， 在 属性 选项 区 域 中 可 以 为 “橡皮 擦 工具 ”选择 5 种 图 形 擦 除 模式 ， 它 们 的 编辑 效 
果 与 “刷子 工具 ”的 绘图 模式 相似 。 
选择 “橡皮 擦 ”工具 后 ， 在 工具 箱 的 下 部 会 出 现 3 个 附属 工具 选项 ， 如 图 15-51 所 示 。 
@ 橡皮 擦 模式 : 用 于 擦 除 区 域 ， 包 括 “ 标 准 擦 除 ”"、“ 擦 除 填 色 ”、“ 擦 除 线条 ”、“ 擦 除 所 选 填 
充 ?” 和 “内 部 擦 除 ”5 个 选项 ， 如 图 15-52 所 示 。 
@ 水 龙头 : 可 以 直接 清除 所 选取 的 区 域 ， 使 用 时 只 需要 单 击 笔触 或 填充 区 域 ， 就 可 以 擦 除 笔 
触 或 填充 区 域 。 
@ 橡皮 擦 形状 : 设置 橡皮 擦 的 形状 以 进行 精确 的 擦 除 。 


图 15-51 附属 工具 图 15-52 橡皮 擦 模式 
“橡皮 擦 ”工具 的 具体 使 用 步 又 如 下 。 


步 又 014 启动 Flash CC， 新 建 空白 文档 并 导入 图 像 文件 “橡皮 擦 工具 jpg”， 按 Ctrl+B 键 分 离 图 
像 ， 选 择 工具 箱 中 的 “橡皮 擦 ” 工 具 ， 如 图 15-53 所 示 。 

步骤 024 选择 “内 部 擦 除 ” 选 项 ， 并 选择 “橡皮 擦 形状 ”， 按 住 刀 标 左 键 在 舞台 中 擦 除 图 像 ， 
如 图 15-54 所 示 。 


图 15-53 ”分离 图 像 图 15-54 ” 擦 除 图 像 


15.6 文本 工具 的 基本 使 用 


文本 工具 可 不 单单 打字 那么 简单 ， 它 还 包含 了 静态 文本 、 动 态 文本 、 输 入 文本 ， 如 图 15-55 
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所 示 。 
@ 静态 文本 : 就 是 我 们 最 常用 的 一 种 文本 形式 了 ， 在 影片 中 加 字 修 饰 等 基本 上 都 是 用 这 一 类 
文本 ， 该 文本 的 最 终 效果 ， 取 决 于 我 们 在 影片 中 编辑 的 ， 也 就 是 说 ， 原 先 设 定 它 是 怎么 样 
的 ， 最 后 导出 的 效果 就 是 那样 ， 取 决 于 原先 的 编辑 。 
@ 动态 文本 : 这 一 类 也 比较 常用 ， 这 是 可 更 新 的 一 种 文本 形式 ， 像 是 动态 时 钟 ， 就 可 以 用 到 
了 ， 可 借助 代码 ， 实 现 文本 不 定时 更 新 。 
@ 输入 文本 : 就 是 可 以 让 用 户 自 己 输 入 文本 ， 像 是 一 些 填充 题 就 比较 常用 到 。 


在 静态 文本 的 “属性 ”面板 中 ， 可 以 更 改 文本 的 字体 、 颜 色 、 间 距 等 ， 如 图 15-56 所 示 。 


图 15-55 文本 类 型 图 15-56 静态 文本 属性 

动态 文本 “属性 ”面板 ， 除 了 修改 字体 、 颜 色 外 ， 还 有 要 注意 的 就 是 动态 文本 没有 修改 横竖 
排列 的 选项 ， 文 本 只 呈 水 平 排列 ， 动 画 中 包含 动态 文本 ， 或 输入 文本 的 时 候 ， 只 有 在 导出 影片 的 
时 候 才能 进行 测试 ， 像 一 些 输入 类 的 动画 ， 只 有 导出 的 时 候 才 能 看 到 结果 ， 文 本 在 编辑 状态 和 最 
后 导出 时 显示 是 不 完全 一 样 的 ， 如 图 15-57 所 示 。 


15-57 ”动态 文本 属性 


除了 上 面 的 基本 设置 外 ， 还 可 以 利用 “实例 名 称 ” 编 辑 框 为 动态 文本 设置 实例 名 。 在 “线条 
类 型 ”下 拉 列 表 中 ， 可 设置 文字 排列 方式 ， 其 中 包括 “单行 ”( 输 出 时 文字 以 单行 显示 )、“ 多 行 ” 
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(输出 时 文字 以 多 行 显示 )、“ 多 行 不 换行 ”( 此 时 只 能 通过 按 Enter 键 进行 换行 )。 
单 击 “ 将 文本 显现 为 HTML” 时 ， 可 保留 文本 的 格式 ， 如 字体 、 颜 色 、 大 小 与 超 链接 。 当 导 
出 文件 时 ， 将 自动 使 用 相关 的 HTML 标记 ， 另 外 还 可 以 利用 “变量 ”编辑 框 设置 变量 名 ， 利 用 下 
面 的 “URL 链接 ”设置 URL 链接 ， 利 用 “目标 ”设置 在 何 处 打开 链接 网 页 。 
“目标 ”中 包括 : 
-blank: 表示 在 新 浏览 器 窗口 中 打开 链接 网 页 。 
-parent: 表示 在 当前 框架 的 父 框架 中 打开 ( 仅 对 框架 网 页 有 效 )。 
-self: 表示 在 当前 窗口 中 打开 链接 网 页 。 
-top: 表示 在 当前 窗口 的 顶层 框架 中 打开 。 


输入 文本 的 “属性 ”面板 ， 基 本 与 动态 文本 相似 ， 主 要 就 是 不 能 加 链接 ， 但 在 “线条 类 型 ” 
下 拉 列 表 中 多 了 密码 选项 ， 这 样 设置 后 输入 的 文本 就 是 呈 米 字形 的 了 ， 如 图 15-58 所 示 。 


图 15-58 动态 文本 
文本 输入 后 ， 右 下 角 有 个 方 框框 ， 可 以 调整 文本 框 的 大 小 ， 上 下 左右 也 有 可 调整 的 实心 小 方 
形 。 其 实 文本 也 可 以 用 变形 工具 进行 调整 的 ， 输 入 文本 允许 设置 “最 大 字符 数 ” 可 以 控制 输入 的 
字符 是 多 少 ， 默 认为 0， 表 示 无 限制 ， 如 图 15-59 所 示 。 


图 15-59 输入 文本 框 
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本 章 我 们 主要 学 习 了 Flash CC 基本 绘图 工具 和 文本 工具 的 使 用 , 本 节 将 介绍 如 何 制作 立体 投 
影 文字 和 创建 简单 的 向 日 葵花 。 
15.7.1 实战 1 一 一 制作 立体 投影 文字 


立体 投影 文字 的 制作 , 主要 方法 是 利用 文字 位 移 成 立体 发 光 投影 文字 效果 , 如 图 15-60 所 示 ， 
有 具体 操作 步骤 如 下 。 


浪漫 七 夕 


QIXIQINGRENJIE 


图 15-60 发光 文字 效果 
原始 文件 ， 原始 文 件 /15/ 发 光 .jpg 
最 终 文件 : 最终 文 件 /15/ 发 光 . Fla 
步骤 014 启动 Flash CC， 执 行 “ 文 件 ”|“ 导 入 ”|“ 导 入 到 舞台 ”命令 ， 导 入 图 像 文件 并 修改 文 
档 大 小 ， 如 图 15-61 所 示 。 


.EN 


浪漫 七 夕 


QIXIQINGRENJIE 


图 15-61 导入 图 像 文件 
步骤 024 单 击 时 间 轴 面板 底部 的 “新 建 图 层 ” 按 钮 ， 新 建 图 层 2， 如 图 15-62 所 示 。 
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步骤 034 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 打 开 “ 属 性 ”面板 ， 文 字 设置 为 “静态 文本 ， 字 
体 “样式 ”设置 为 Bold，“ 大 小 ”设置 为 110，“ 颜 色 ” 设 置 为 黑色 ， 如 图 15-63 所 示 。 


| 7- 
字母 间距 : 00 


vv 自 兴 调整 字 距 
入 宏和 后 


图 15-62 新 建 图 层 2 图 15-63 设置 文本 属性 
步骤 044 在 舞台 中 单 击 输入 字母 LOVE， 如 图 15-64 所 示 。 


15-64 ”输入 文字 


步骤 054 单 击 时 间 轴 面板 中 的 “新 建 图 层 ” 按 钮 ， 在 图 层 2 的 上 面 新 建 图 层 3， 在 字母 的 上 面 输 
入 白色 字母 LOVE， 如 图 15-65 所 示 。 


浪漫 七 夕 
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15-65 ”输入 字母 
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步骤 064 打开 “属性 ”面板 ， 单 击 “ 添 加 滤 镜 ”按钮 在 弹出 的 列表 中 选择 “发 光 ” 选项， 如 图 
15-66 所 示 。 
步 又 07 4 添加 发 光 效 果 ， 将 “模糊 ”设置 为 8，“ 颜 色 ” 设 置 为 黄色 ， 如 图 15-67 所 示 。 


图 15-66 选择 “发 光 ” 选 项 图 15-67 设置 发 光 参数 
步 又 08 4 设置 完成 后 ， 即 可 看 到 立体 投影 发 光 效果 如 图 15-68 所 示 。 


.4 Da 


浪漫 七 夕 


QIXIQINGRENJIE 


NIMNTOF: 


* 
好 
四 
-~ 
到 
名 
和 
a 
- 
门 


到 
本 
n 


15-68 “立体 投影 发 光 效果 
15.7.2 ”实战 2 一 一 创建 简单 的 向 日 获 花 


本 节 讲 述 利用 Flash 绘图 工具 制作 简单 的 向 日 葵花 效果 ， 如 图 15-69 所 示 ， 具 体操 作 步 又 
如 下 。 


图 15-69 向 日 葵花 效果 
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最 终 文件 : 最 终 文件 /15/ 向 日 葵花 .Fl1a 


步骤 01 和 启动 Flash CC， 新 建 空白 文档 ， 选 择 工具 箱 中 的 “椭圆 ”工具 ， 将 笔触 颜色 设置 为 黄 
色 ， 填 充 颜 色 设置 为 绿色 ， 如 图 15-70 所 示 。 
步骤 024 在 舞台 中 按 住 鼠 标 左 键 绘制 桶 圆 ， 如 图 15-71 所 示 。 


图 15-70 新 建 空白 文档 15-71 绘制 椭圆 
步骤 034 选择 椭圆 后 按 Ctrl+C 键 将 其 复制 执行“ 编辑 ”|“ 粘 贴 到 当前 位 置 ” 命令 ， 如 图 15-72 
所 示 。 


步骤 044 粘贴 椭圆 后 ， 执 行 “窗口 ”|“ 变 形 ” 命令， 打开 “变形 ”面板 ， 将 “旋转 ”设置 为 30?， 
如 图 15-73 所 示 。 


图 15-72 ”选择 “粘贴 到 当前 位 置 ”命令 图 15-73 “变形 ”面板 
步骤 05 重复 步骤 3~4 复制 椭圆 ， 然 后 在 “变形 ”面板 中 将 “旋转 ”设置 为 60”， 如 图 15-74 
所 示 。 


步骤 064 再 复制 出 3 个 椭圆 并 设置 旋转 效果 ， 如 图 15-75 所 示 。 
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图 15-74 ”设置 椭圆 变形 15-75 ”复制 多 个 椭 


步骤 07 4 选择 工具 箱 中 的 “多 角 星 形 ” 工 具 ， 在 选项 栏 中 单 击 “ 选 项 ”按钮 ， 如 图 15-76 所 示 。 

步骤 084 选择 后 弹出 “工具 设置 ”对 话 框 ， 将 “样式 ”设置 为 “ 星 形 ”，“ 边 数 ” 设 置 为 30， 
“ 星 形 顶 点 大 小 ”设置 为 1， 如 图 15-77 所 示 。 

| ES 工具 设置 EE 


图 15-76 单 击 “ 选 项 ”按钮 图 15-77 “工具 设置 ”对 话 框 
步骤 094 单 击 “ 确 定 ”按钮 ， 设 置 多 角 星 形 参数 ， 在 舞 合 中 按 住 鼠标 左 键 绘制 多 角 星 形 ， 如 
15-78 所 示 。 


图 15-78 绘制 多 角 星 形 
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基本 动画 


本 章 导 读 


Adobe Flash CC 提供 了 强大 的 动画 和 多 媒体 内 容 的 创建 工具 与 环境 ， 并 让 视觉 效果 设计 师 
可 以 创建 丰富 多 彩 的 动画 效果 。 本 章 通 过 详细 的 例子 ， 主 要 介绍 Flash 中 几 种 简单 动画 的 创建 


方法 ， 


内 容 包 括 逐 帧 动画 和 补 间 动 画 。 
时 间 轴 与 关键 帧 

创建 基本 动画 

创建 引导 动画 

创建 遮 单 动画 

创建 有 声 动画 

编辑 声音 


实例 展示 


形状 补 间 动 画 引导 动画 
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16.1 ”时 间 轴 与 关键 帧 

在 Flash 中 ， 每 个 图 层 都 是 相互 独立 的 ， 拥 有 独立 的 时 间 轴 和 独立 的 帧 ， 可 以 在 一 个 图 层 上 
任意 修改 图 层 中 的 内 容 而 不 会 影响 到 其 他 图 层 的 内 容 。 
16.1.1 时 间 轴 


在 Flash 中 , 时 间 轴 位 于 工作 区 的 右 下 方 , 是 进行 Flash 动画 创建 的 核心 部 分 。 时 间 是 由 图 层 、 
帧 和 播放 头 组 成 ， 影 片 的 进度 通过 帧 来 控制 。 时 间 轴 可 以 分 为 两 个 部 分 : 左 侧 的 图 层 操作 区 和 右 
侧 的 帧 操作 区 ， 如 图 16-1 所 示 。 


LDL 


16-1 时 间 轴 面板 


16.1.2 ”时 间 轴 中 的 图 层 


Flash 文档 中 的 每 一 个 场景 都 可 以 包含 任意 数量 的 时 间 轴 图 层 。 使 用 图 层 和 图 层 文件 夹 可 组 
织 动画 序列 的 内 容 和 分 隔 动画 对 象 。 在 图 层 和 文件 夹 中 组 织 它们 , 可 防止 它们 在 重合 时 相互 擦 除 、 


新 建 一 个 Flash 文档 之 后 ， 它 仅 包含 一 个 层 ， 在 “时 间 轴 ”面板 中 也 可 为 其 添加 更 多 的 层 。 
新 建 图 层 有 以 下 几 种 方法 。 


@ 单 击 “ 时 间 轴 ”面板 底部 的 “新 建 图 层 ”按钮 ， 即 可 新 建 图 层 ， 如 图 16-2 所 示 。 
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16-2 ”新建 图 层 
@ 执行 “插入 ”|“ 时 间 轴 ”|“ 图 层 ” 命 令 ， 也 可 以 插入 图 层 ， 如 图 16-3 所 示 。 
@ 在 “时 间 轴 ”面板 中 已 有 的 图 层 上 , 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “插入 图 层 ” 
命令 ， 如 图 16-4 所 示 ， 即 可 插入 一 个 新 图 层 。 


新 建 元 件 (N) -Ctrl+F8 


补 同 | 


下 
5 


图 16-3 新 建 图 层 图 164 插入 图 层 
16.1.3 ”关键 帧 


帧 是 创建 动画 的 基础 ， 也 是 构建 动画 最 基本 的 元 素 之 一 。 在 “时 间 轴 ”面板 中 可 以 很 明显 地 
看 出 帧 与 图 层 是 一 一 对 应 的 。 

在 时 间 轴 中 ， 帧 分 为 3 种 类 型 ， 分 别 是 普通 帧 、 关 键 帧 、 空 白 关 键 帧 。 

1. 普通 帧 

普通 帧 起 着 过 滤 和 延长 关键 帧 内 容 显 示 的 作用 。 在 时 间 轴 中 , 普通 帧 一 般 是 以 空心 方 格 表示 
每 个 方 格 占用 一 个 帧 的 动作 和 时 间 ， 如 图 16-5 所 示 是 在 第 5 帧 处 插入 了 普通 帧 。 


时 间 轴 
oa 1 5 


EEsE Wil 
RE | 


恒 有 站 CEA 


16-5 ”插入 普通 帧 
2. 空白 关键 帧 
空白 关键 帧 是 以 空心 圆 表示 。 空 白 关 键 帧 是 特殊 的 关键 帧 ， 它 没有 任何 对 象 存 在 ， 可 以 在 其 
上 绘制 图 形 。 如 果 在 空白 关键 帧 中 添加 对 象 ， 它 会 自动 转化 为 关键 帧 。 一 般 新 建 图 层 的 第 1 帧 都 
为 空白 关键 帧 ， 一 旦 在 其 中 绘制 图 形 后 ， 则 变 为 关键 帧 。 同 样 的 道理 ， 如 果 将 某 关 键 帧 中 的 全 部 
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对 象 删除 ， 则 此 关键 帧 会 转化 为 空白 关键 帧 ， 如 图 16-6 所 示 。 


图 16-6 ”空白 关键 帧 
3. 关键 帧 


关键 帧 是 用 来 定义 动画 变化 的 帧 。 在 动画 播放 的 过 程 中 ， 关 键 帧 会 呈现 出 关键 性 的 动作 或 内 
容 上 的 变化 。 在 时 间 轴 中 的 关键 帧 显示 实心 的 小 圆 球 ， 存 在 于 此 帧 中 的 对 象 与 前 后 帧 中 的 对 象 属 
性 是 不 同 的。 在 时 间 轴 面板 中 插入 关键 帧 ， 如 图 16-7 所 示 。 


图 16-7 关键 帧 


16.2 ”创建 基本 动画 


Flash 提供 了 多 种 方法 用 来 创建 动画 和 特殊 效果 ， 每 种 方法 为 创作 精彩 的 动画 内 容 提供 了 多 
种 可 能 。 


16.2.1 ”实战 1 一 一 逐 帧 动画 


逐 帧 动画 是 一 种 常见 的 动画 形式 ， 其 原理 是 在 “连续 的 关键 帧 ”中 分 解 动画 动作 ， 也 就 是 在 
时 间 轴 的 每 帧 上 逐 帧 进入 或 绘制 不 同 的 内 容 ， 使 其 连续 播放 而 成 动画 。 它 的 优势 也 很 明显 : 逐 帧 
动画 具有 非常 大 的 灵活 性 , 几乎 可 以 表现 任何 想 表 现 的 内 容 , 它 类 似 于 电影 的 播放 模式 , 如 图 16-8 
所 示 是 逐 帧 显示 文字 的 动画 效果 。 


图 16-8 ” 逐 帧 文字 效果 
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下 面 通过 实例 讲述 逐 帧 文字 动画 效果 的 制作 ， 操 作 步 骤 如 下 。 


步骤 01 启动 Flash CC， 执 行 “ 文 件 ”| “新 建 ” 命 令 ， 新 建 空白 文档 并 导入 图 像 文 件 ， 如 图 16-9 
所 示 。 

步骤 024 执行 “修改 ”|“ 文 档 ” 命 令 ， 弹 出 “文档 设置 ”对 话 框 ， 将 “舞台 大 小 ”设置 为 959 
和 320， 如 图 16-10 所 示 。 


图 16-9 导入 图 像 文件 图 16-10 “文档 设置 ”对 话 框 
步 野 034 单 击 “ 确 定 ”按钮 ， 修 改 文档 大 小 和 导入 图 像 一 致 ， 如 图 16-11 所 示 。 


图 16-11 修改 文档 大 小 
步骤 044 选择 第 2 帧 ， 单 击 鼠 标 右键 在 弹出 的 快捷 菜单 中 选择 “插入 关键 帧 ”命令 ， 如 图 16-12 


所 示 。 


图 16-12 插入 关键 帧 
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步骤 05 选择 工具 箱 中 的 “ 模 排 文字 ”工具 ， 在 “属性 ”面板 中 设置 字体 样式 和 字体 大 小 ， 将 
字体 颜色 设置 为 蓝 色 ， 在 舞台 中 输入 文字 “在 ”， 如 图 16-13 所 示 。 


图 16-13 输入 文字 
步 野 06 4 单 击 选择 第 3 帧 后 按 F6 键 插入 关键 帧 ， 输 入 文字 “水 ”， 如 图 16-14 所 示 。 


图 16-14 输入 文字 “水 ” 
步 又 07 4 单 击 选择 第 4 帧 后 按 F6 键 插入 关键 帧 ， 输 入 文字 “一 ”， 如 图 16-15 所 示 。 


* 后 


图 16-15 输入 文字 “一 ” 
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步 又 08 4 单 击 选择 第 5 帧 后 按 F6 键 插入 关键 帧 ， 输 入 文字 “ 方 ”， 如 图 16-16 所 示 。 


光一 


1 在 水 人 坊 


图 16-16 输入 文字 “ 方 ” 
步骤 094 执行 “文件 ”|“ 保 存 ” 命 令 ， 弹 出 “另存 为 ”对 话 框 ， 将 “文件 名 ”设置 为 “ 逐 帧 动 
画 ”， 如 图 16-17 所 示 。 单 击 “ 保 存 ” 按 钮 ， 即 可 成 功 保存 文档 。 
回 另存 为 Ey 


ve 
文件 各 (N): 逐 四 动画 v 
保存 类 型 D: Flash 文档 ("fla) v” 


-二 队 二 文 伯 关 (5) 取消 


图 16-17 “另存 为 ”对 话 框 
16.2.2 ”实战 2 一 一 补 间 动 画 


使 用 补 问 动画 可 设置 对 象 的 属性 ， 如 一 个 帧 中 以 及 另 一 个 帧 中 的 位 置 和 Alpha 透明 度 。 对 
于 由 对 象 的 连续 运动 或 变形 构成 的 动画 ， 补 间 动 画 很 有 用 。 补 间 动 画 在 时 间 轴 中 显示 为 连续 的 由 
范围 ， 默 认 情 况 下 可 以 作为 单个 对 象 进行 选择 。 补 间 动 画 功能 强大 ， 易 于 创建 。 补 问 动画 分 为 伟 
统 补 问 和 补 间 形状 。 
@ 传统 补 间 : 传统 补 间 与 补 间 动 画 类 似 ， 但 是 创建 起 来 更 复杂 。 传 统 补 间 允 许 一 些 特定 的 动 
画 效果 ， 使 用 基于 范围 的 补 间 不 能 实现 这 些 效果 。 
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@” 补 间 形 状 ; 形状 补 间 中 ， 可 在 时 间 轴 中 的 特定 帧 绘制 一 个 形状 ， 然 后 更 改 该 形状 或 在 另 一 
个 特定 帧 绘制 另 一 个 形状 。 最 后 Flash 将 内 插 中 间 帧 的 中 间 形 状 ， 创 建 一 个 形状 变形 为 另 
一 个 形状 的 动画 。 


下 面 通过 实例 讲述 形状 补 间 动 画 的 创建 ， 效 果 如 图 16-18 所 示 。 


图 16-18 ”形状 补 间 动 画 


具体 操作 步骤 如 下 。 


步骤 01 启动 Flash CC， 新 建 一 个 空白 文档 ， 执 行 “文件 ” |“ 导入 ”|“ 导 入 到 舞台” 命令 ， 导 
入 图 像 文件 ， 如 图 16-19 所 示 。 
步 台 02 选中 导入 的 图 像 ， 按 Ctrl+B 键 分 离 图 像 ， 如 图 16-20 所 示 。 


* 

人 
< 

加. 
©.0 
元 也 
全 局 

2 
和 所 


图 16-19 导入 图 像 文件 图 16-20 分离 图 像 


步骤 03 和 人 在 第 40 帧 后 按 F6 键 插入 关键 帧 ， 如 图 16-21 所 示 。 
步 又 044 单 击 选中 第 1 帧 ， 选 中 工具 箱 中 的 “任意 变形 ”工具 ， 在 底部 的 属性 选项 中 选择 “ 套 
锁 ” 选 项 ， 调 整 导入 的 形状 ， 如 图 16-22 所 示 。 
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图 16-21 插入 关键 帧 图 16-22 调整 形状 
步骤 054 单 击 选择 1~40 帧 之 间 的 任意 一 帧 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 补 间 
形状 ”命令 ， 如 图 16-23 所 示 。 
步 野 064 选择 创建 补 间 形状 动画 ， 如 图 16-24 所 示 。 


Nl 


图 16-23 选择 “创建 补 间 形 状 ” 命 令 图 16-24 创建 补 间 形 状 动画 


步 又 07 4 为 了 动画 播放 完 有 一 定 的 延迟 时 间 ， 选 择 第 60 帧 后 按 F5 键 插入 关键 帧 ， 如 图 16-25 
所 示 。 


COA EA 


EE TI EC EE EE 


图 16-25 插入 关键 帧 
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16.3 ”创建 引导 动画 

引导 层 是 Flash 动画 中 绘制 路 径 的 图 层 。 引 导 层 中 的 图 案 可 以 为 绘制 的 图 形 或 对 象 定位 ， 主 
要 用 来 设置 对 象 的 运动 轨迹 。 
16.3.1 引导 动画 的 创建 原理 


引导 层 的 原理 就 是 把 画 出 的 线条 作为 动作 补 间 元 件 的 轨道 。 

引导 层 的 作用 是 辅助 其 他 图 层 对 象 的 运动 或 定位 ， 例 如 我 们 可 以 为 一 个 球 指定 其 运动 轨迹 。 
另外 ， 也 可 以 在 这 个 图 层 上 创建 网 格 或 对 象 ， 以 帮助 对 齐 其 他 对 象 。 被 导向 图 层 的 上 一 层 为 一 导 
向 层 或 被 导向 层 时 才 有 效 。 当 该 项 被 选择 时 ， 所 代表 的 层 与 导向 图 层 将 产生 某 种 关联 。 


16.3.2 ”实战 3 一 一 创建 引导 动画 


在 引导 层 中 ， 可 以 像 其 他 层 一 样 制 作 各 种 图 形 和 引入 元 件 ， 但 最 终 发 布 时 引导 层 中 的 对 象 不 
会 显示 出 来 。 下 面 创建 一 个 引导 层 动画 ， 如 图 16-26 所 示 。 


16-26 引导 动画 


制作 引导 动画 的 具体 操作 步骤 如 下 。 
步骤 01 公 启动 Flash CC， 新 建 空 白文 档 并 导入 图 像 文件 ， 修 改 图 像 和 文档 大 小 一 致 ， 如 图 16-27 
所 示 。 
步骤 024 单 击 时 间 轴 面板 底部 的 “新 建 图 层 ” 按 钮 ， 新 建 图 层 2， 如 图 16-28 所 示 。 
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去 
人 
号， 
9 中. 
分 DEEDIAS 
2 
图 16-27 导入 图 像 文件 图 16-28 ”新建 图 层 2 
步骤 034 执行 “文件 ” |“ 导入 ”|“ 导 入 到 舞台 ”命令 ， 导 入 图 像 文 件 “ 蝴 蝶 .gif” ， 如 图 16-29 


所 示 。 
步 又 044 选中 导入 的 蝴蝶 图 像 并 按 F8 键 ， 弹 出 “转换 为 元 件 ” 对 话 框 ， 将 “类 型 ”设置 为 “图 
形 ”， 如 图 16-30 所 示 。 


图 16-29 导入 图 像 文件 图 16-30 “转换 为 元 件 ” 对 话 框 
步骤 054 单 击 “ 确 定 ” 按 钮 ， 将 其 转换 为 元 件 ， 如 图 16-31 所 示 。 


图 16-31 转换 为 元 件 


步 最 064 选中 图 层 1 的 第 50 帧 ， 按 F5 键 插入 帧 ; 选中 图 层 2 的 第 50 帧 ， 按 F6 键 插入 关键 帧 ， 
如 图 16-32 所 示 。 
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图 16-32 插入 帧 和 关键 帧 


步骤 074 在 图 层 2 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 传统 运动 引导 层 ” 命 令 ， 
如 图 16-33 所 示 。 
步 又 08 4 选择 后 添加 传统 运动 引导 层 ， 如 图 16-34 所 示 。 


16-33 选择 “添加 传统 运动 引导 层 ” 选 项 图 16-34 ”添加 传统 运动 引导 层 


步骤 09 人 选中 运动 引导 层 的 第 1 帧 ， 选 择 工具 箱 中 的 “铅笔 ”工具 ， 在 运动 引导 层 中 绘制 一 条 
直线 ， 如 图 16-35 所 示 。 


16-35 ”绘制 直线 
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步骤 10 人 选中 图 层 2 的 第 1 帧 ， 将 图 形 元 件 拖 动 到 路 径 的 起 始点 ， 如 图 16-36 所 示 。 


图 16-36” 拖 动 元 件 到 起 始点 


步 又 114 选中 图 层 2 的 第 50 帧 ， 将 图 形 元 件 拖 动 到 路 径 的 终点 ， 如 图 16-37 所 示 。 


图 16-37” 拖 动 元 件 到 终点 


步骤 12 将 光标 放置 在 图 层 2 中 第 1 帧 第 50 帧 之 问 的 任意 位 置 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 
菜单 中 选择 “创建 传统 补 间 ”命令 ， 创 建 补 间 动 画 如 图 16-38 所 示 。 


图 16-38 ”创建 补 间 动 画 
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16.4 ”创建 庶 雷 动画 


谈 章 动画 也 是 Flash 中 常用 的 一 种 技巧 。 遮 罩 动 画 就 好 比 在 一 个 板子 上 打 了 各 种 形状 的 孔 ， 
透 过 这 些 孔 ， 可 以 看 到 下 面 的 图 层 。 


16.4.1 ” 遮 罩 动画 的 创建 原理 


谈 单 层 的 基本 原理 是 能 够 透 过 该 图 层 的 对 象 看 到 “被 遮 单 层 ” 中 的 对 象 及 其 属性 (包括 它们 
的 变形 效果 ) ,但 是 谈 单 层 中 对 象 的 许多 属性 如 渐变 色 、 透 明度 、 颜 色 和 线条 样式 等 却 是 被 忽略 
的 。 比 如 ， 我 们 不 能 通过 谈 单 层 的 渐变 色 来 实现 被 谈 单 层 的 渐变 色 变 化 。 

谈 单 动画 是 Flash 中 的 一 个 很 重要 的 动画 类 型 ， 很 多 效果 丰富 的 动画 都 是 通过 遮 单 动画 来 完 
成 的 。 在 Flash 的 图 层 中 有 一 个 遮 单 图 层 类 型 ， 为 了 得 到 特殊 的 显示 效果 ， 可 以 在 谈 单 层 上 创建 
一 个 任意 形状 的 “视窗 ”， 遮 罩 层 下 方 的 对 象 可 以 通过 该 “视窗 ”显示 出 来 ， 而 “视窗 ”之 外 的 
对 象 将 不 会 显示 。 


16.4.2 ”实战 4 一 一 制作 遮 罩 的 图 片 效果 


本 例 运用 Flash 制作 漂亮 遮 单 的 图 片 效果 ， 主 要 通过 运用 遮 单 的 方法 让 图 片 以 圆 形 慢 慢 变 成 
正方 形 显现 出 来 ， 效 果 如 图 16-39 所 示 ， 有 具体 操作 步骤 如 下 。 


图 16-39 迹 罩 动画 效果 


步 又 014 启动 Flash CC， 执 行 “文件 ”|“ 新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 将 “高 ” 设 
置 为 800，“ 宽 ”设置 为 500， 如 图 16-40 所 示 。 
步 又 024 单 击 “ 确 定 ” 按 钮 ， 新 建 空 白文 档 ， 如 图 16-41 所 示 。 
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图 1640 “新 建文 档 ” 对 话 框 图 1641 新 建 空白 文档 
步骤 034 执行 “文件 ”|“ 导 入 ”|“ 导 入 到 舞台 ”命令 ， 弹 出 “导入 ”对 话 框 ， 在 该 对 话 框 中 选 
择 图 像 文件 “1.jpg”， 如 图 16-42 所 示 。 

[a 

[oo | 
这 

ji wndowea os ( 这 了 画 。。。 运 术 VW 

es ie 取消 


图 1642 “导入 ”对 话 框 
步骤 044 单 击 “打开 ”按钮 ， 导 入 图 像 文 件 ， 修 改 文档 和 图 像 大 小 一 致 ， 如 图 16-43 所 示 。 


图 16-43 导入 图 像 文件 
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步骤 054 选择 导入 的 图 像 文件 ， 执 行 “ 修 改 ”|“ 转 换 为 元 件 ” 命 令 ， 弹 出 “转换 为 元 件 ” 对 话 
框 ， 将 “类 型 ”选择 “图 形 ”选项 ， 如 图 16-44 所 示 。 

步骤 064 单 击 “确定 ”按钮 ， 将 其 转换 为 图 像 元 件 ， 在 第 30 帧 后 按 F5 键 插入 帧 ， 如 图 16-45 
所 示 。 


图 16-44 “转换 为 元 件 ” 对 话 框 图 16-45 插入 帧 


步骤 074 单 击 时间 轴 面板 中 的 “新 建 图 层 ”按钮 ， 新 建 图 层 2。 选 择 工具 箱 中 的 “椭圆 ”工具 ， 
在 舞台 中 绘制 黑色 椭圆 ， 如 图 16-46 所 示 。 


图 16-46 绘制 椭圆 


步骤 084 在 第 30 帧 后 按 F6 键 插入 关键 帧 ， 选 择 工具 箱 中 的 “矩形 ”工具 ， 在 舞 合 中 绘制 算 形 
覆盖 图 层 1 中 导入 的 图 像 ， 如 图 16-47 所 示 。 


步骤 094 在 图 层 2 的 第 1~30 帧 之 间 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 补 间 形状 ” 
命令 ， 如 图 16-48 所 示 。 
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图 16-47 绘制 矩形 图 16-48 选择 “创建 补 间 形 状 ” 命 令 
步骤 10 选择 后 创建 补 间 形 状 动画 ， 如 图 16-49 所 示 。 


图 16-49 创建 补 间 形状 动画 
步骤 114 单 击 选择 图 层 2, 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “ 遮 罩 层 ” 命令 , 如 图 16-50 


所 示 。 


Be 
图 16-50 选择 “ 遮 单 层 ” 命 令 


步 又 124 选择 后 设置 庶 曾 动画 效果 ， 如 图 16-51 所 示 。 
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图 16-51 遮 罩 动画 效果 


16.5 ”创建 有 声 动画 


利用 Flash 提供 的 一 些 控制 音频 的 方法 ， 可 以 使 声音 独立 于 时 间 轴 循环 播放 ， 也 可 以 专门 为 
动画 配 上 一 段 音 乐 ， 或 为 按钮 添加 某 种 声音 ， 还 可 以 设置 声音 的 渐 入 渐 出 效果 。 


16.5.1 ”Flash CC 中 可 使 用 的 声音 文件 类 型 


存储 音频 文件 的 格式 是 多 种 多 样 的 ， 在 Flash 中 可 以 直接 引用 的 主要 有 WAV 和 MP3 两 种 音 
频 格式 的 文件 ，AIFF 和 AU 格式 的 音频 文件 使 用 频率 不 是 很 高 。 在 Flash 中 不 能 使 用 MIDI 格式 
的 音频 文件 ， 如 果 要 使 用 此 格式 ， 则 必须 使 用 JavaScript 脚本 语言 来 处 理 。 
@ WAV: WAV 格式 的 音频 文件 支持 立体 声 和 单 道 声 ， 也 可 以 是 多 种 位 分 辨 率 和 采样 率 。 在 
Flash 中 可 以 导入 各 种 音频 软件 创建 的 WAV 格式 的 音频 文件 。 
@ MP3: MP3 是 大 家 熟悉 的 一 种 数字 音频 格式 。 相 同 长 度 的 音频 文件 用 MP3 格式 存储 ， 一 
般 只 有 WAV 格式 的 110。 虽 然 MP3 格式 是 一 种 破坏 性 的 压缩 格式 , 但 是 因为 其 取样 与 编 
码 的 技术 优异 ， 其 音质 接近 CD， 体 积 小 ， 传 输 方便 ， 拥 有 较 好 的 声音 质量 ， 所 以 目前 的 
电脑 音乐 大 多 是 以 MP3 格式 输出 的 。Flash 中 默认 的 音频 输出 格式 就 是 MP3 格式 。 
@ ADPCM: ADPCM 格式 的 音频 文件 使 用 的 是 一 种 音频 的 压缩 模式 ， 可 以 将 声音 转换 为 二 
进 制 信息 ， 主 要 用 于 语言 处 理 。 
@ RAW: 使 用 RAW 格式 输出 是 不 对 音频 文件 进行 任何 压缩 ， 经 过 这 样 输出 后 的 动画 文件 会 
占用 很 大 的 空间 ， 所 以 很 难 在 Web 上 播放 。 使 用 此 格式 的 好 处 是 可 以 保持 与 Flash 旧版 本 
的 兼容 性 。 


16.5.2 ”添加 声音 


用 户 可 以 在 影片 中 以 各 种 方式 添加 声音 ， 这 个 声音 的 实例 而 不 对 原声 音 文件 构成 任何 影响 。 
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导入 声音 文件 的 具体 操作 步 又 如 下 。 
步骤 01 人 启动 Flash CC， 打 开 文档 ， 如 图 16-52 所 示 。 


图 16-52 打开 文档 
步骤 024 执行 “文件 ” |“ 导入 ”|“ 导 入 到 库 ”命令 ， 弹 出 “导入 到 库 ” 对 话 框 ， 如 图 16-53 所 示 。 
步 野 034 单 击 “打开 ”按钮 ， 将 音乐 文件 导入 到 “ 库 ” 面 板 中 ， 如 图 16-54 所 示 。 
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图 16-54 导入 音乐 


图 16-53 “导入 到 库 ” 对 话 框 
步骤 044M 单 击 时 间 轴 面板 中 的 “新 建 图 层 ” 按 钮 ， 新 建 图 层 2， 单 击 选中 第 1 帧 ， 在 “ 库 ”面板 
中 选中 声音 文件 将 其 拖 动 到 该 帧 中 ， 即 可 添加 声音 ， 如 图 16-55 所 示 。 


图 16-55 添加 声音 
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16.5.3 ”编辑 声音 


在 “声音 ”属性 的 “声音 循环 ”下 拉 列 表 中 可 以 控制 声音 的 重复 播放 。 在 “声音 循环 ”下 拉 
列表 中 有 两 个 选项 ， 如 图 16-56 所 示 。 


图 16-56 设置 属性 
@ 重复 : 在 其 文本 框 中 输入 播放 的 次 数 ， 默 认 的 是 播放 1 次 。 
@ 循环 : 声音 可 以 一 直 不 停 地 循环 播放 。 
同步 是 指 影片 和 声音 文件 的 配合 方式 。 可 以 决定 声音 与 影片 是 同步 还 是 自行 播放 。 在 “同步 ” 
下 拉 列 表 中 提供 了 4 种 方式 ， 如 图 16-57 所 示 。 


图 16-57 同步 方式 
@ 事件 : 必须 等 声音 全 部 下 载 完毕 后 才能 播放 动画 。 
@ 开始 : 如 果 选 择 的 声音 实例 已 在 时 间 轴 上 的 其 他 地 方 播放 过 了 ，Flash 将 不 会 再 播放 这 个 
实例 。 
@ 停止 : 可 以 使 正在 播放 的 声音 文件 停止 。 
@ 数据 流 : 将 使 动画 与 声音 同步 ， 以 便 在 Web 站 点 上 播放 。Flash 强制 动画 和 音频 流 同步 ， 
将 声音 完全 附加 到 动画 上 。 


同一 个 声音 可 以 做 出 多 种 效果 ， 可 以 在 “效果 ”下 拉 列 表 中 进行 选择 以 让 声音 发 生变 化 ， 还 
可 以 让 左右 声 道 产 生出 各 种 不 同 的 变化 。 在 “属性 ”面板 中 的 “效果 ”下 拉 列 表 中 提供 了 多 种 播 
放声 音 的 效果 选项 ， 如 图 16-58 所 示 。 


16-58 ”声音 效果 选项 
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“声音 效果 ”选项 用 来 设置 声音 的 音效 ， 其 下 拉 列 表 中 有 以 下 几 个 选项 。 

@ 无 : 不 设置 声 道 效 果 。 

@ 左 声 道 : 控制 声音 在 左 声 道 播放 。 

@ 右 声 道 : 控制 声音 在 右 声 道 播放 。 

@ 向 右 淡出 : 降低 左 声 道 的 声音 ， 同 时 提高 右 声 道 的 声音 ， 控 制 声 音 从 左 声 道 过 渡 到 右 声 道 
播放 。 

向 左 淡出 : 控制 声音 从 右 声 道 过 渡 到 左 声 道 播放 。 

淡 入 : 在 声音 的 持续 时 间 内 逐渐 增强 其 幅度 。 

淡出 : 在 声音 的 持续 时 间 内 逐渐 减 小 其 幅度 。 

自 定义 : 允许 创建 自己 的 声音 效果 ， 可 以 从 “编辑 封套 ”对 话 框 中 进行 编辑 ， 如 图 16-59 
所 示 。 


图 16-59 “编辑 封套 ”对 话 框 
对 话 框 中 分 为 上 下 两 个 编辑 区 ， 上 方 代表 左 声 道 波形 编辑 区 ， 下 方 代 表 右 声 道 编辑 区 。 在 每 
一 个 编辑 区 的 上 方 都 有 一 条 左 侧 带 有 小 方块 的 控制 线 ， 可 以 通过 控制 线 调整 声音 的 大 小 、 淡 出 和 
淡 入 等 。 
16.5.4 ”实战 6 一 一 利用 按钮 控制 声音 播放 


下 面 为 Flash 动画 添加 音乐 效果 ， 当 单 击 按钮 “音乐 ”时 ， 即 可 播放 出 精美 的 音乐 ， 效 果 如 
图 16-60 所 示 ， 有 具体 操作 步骤 如 下 。 
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图 16-60 添加 音乐 效果 
原始 文件 ， 原 始 文件 /16/ 风 景 .jpg 
最 终 文件 ， 最 终 文件 /16/ 利 用 按钮 控制 声音 播放 .Fla 
步骤 014 启动 Flash Cc， 执行“ 文件 ”|“ 导 入 ”|“ 导 入 到 库 ” 命 令 ， 弹 出 “导入 到 库 ” 对 话 框 ， 
单 击 选 择 图 像 文件 “风景 jpg”， 按 住 键盘 中 的 Ctrl 键 单 击 选 择 音乐 文件 “影片 .mp3”， 
如 图 16-61 所 示 。 
步骤 024 单 击 “打开 ”按钮 ， 导 入 图 像 文 件 和 音乐 文件 ， 如 图 16-62 所 示 。 


加 导入 到 库 Lx 
个 k 效果 原始 做 果 ;16 vo 汶 宇 "16 也 
拒 织 ” 新 建文 件 详 = © 
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加 视 顽 
= Ww? 
上 文江 - 
总 下 起 史明 楼 二 于 玫 
加 言 乐 ii 
点 百 上 
Wem 6 et 由 
译本 地 磁盘 (D:) 这 2 
本地 磁盘 (E) 瀛 0 声音 引导 » 画 量 片 
(有 | 
、 中 2 4 
文件 各 (NJ 影片 “ 风 县 - 所 文件 (.") 
EE 
图 16-61 “导入 到 库 ” 对 话 框 图 16-62 导入 图 像 和 音乐 


步骤 034 选择 “ 库 ”面板 中 的 图 像 文件 ， 将 其 拖 动 到 舞 合 中 ， 如 图 16-63 所 示 。 

步骤 044 执行 “插入 ”| “新 建 元 件 ” 命 令 ， 弹 出 “创建 新 元 件 ” 对 话 框 ，“ 类 型 ”选择 “按钮 ” ， 
如 图 16-64 所 示 。 

步 最 054 单 击 “确定 ”按钮 ， 进 入 元 件 编辑 模式 ， 如 图 16-65 所 示 。 
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16-64 “创建 新 元 件 ” 对 话 框 图 16-65 ”元件 编辑 模式 


步 最 064 选择 工具 箱 中 的 “椭圆 ”工具 ， 在 选项 栏 中 将 笔触 颜色 设置 为 黄色 ， 填 充 颜色 设置 为 
绿色 ， 在 舞台 中 绘制 梢 圆 ， 如 图 16-66 所 示 。 
步骤 074 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 舞台 中 输入 文字 “音乐 ”， 如 图 16-67 所 示 。 


图 16-66 绘制 椭圆 图 16-67 输入 文字 
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步 又 08 4 按 F6 键 括 入 关键 帧 ， 单 击 选择 椭圆 ， 将 填充 颜色 设置 为 棕色 ， 如 图 16-68 所 示 。 


步骤 094 单 击 “新 建 图 层 ”按钮 ， 新 建 图 层 2。 按 F6 键 插入 关键 帧 ， 如 图 16-69 所 示 。 


16-68 ”更 改 填充 颜色 图 16-69 ”插入 关键 帧 


步骤 104 将 “ 库 ” 面 板 中 的 音乐 文件 拖 入 到 舞 人 台中， 打开“ 属性 ”面板 ， 将 “效果 ”设置 为 “ 淡 
入 ”，“ 同 步 ”设置 为 “开始 ”， 如 图 16-70 所 示 。 


图 16-70 拖 入 音乐 到 舞台 


步 最 114 单 击 “ 场 景 1” 按 钮 ， 返 回 到 场景 ， 将 “元 件 1” 拖 入 到 和 舞台 中 合适 的 位 置 ， 如 图 16-71 
所 示 。 


图 16-71 拖 入 元 件 1 
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交互 动画 


本 章 导读 


Flash CC 还 提供 了 一 个 最 为 主要 的 功能 ， 即 交互 功能 ， 利 用 ActionScript 可 以 实现 这 种 交 
互 功能 。 本 章 介绍 ActionScript 脚本 编程 的 语法 ， 以 及 ActionScript 的 编程 环境 ， 最 后 通过 实例 
讲述 交互 式 动画 的 制作 。 
ActionScript 概述 
ActionScript 3.0 语句 中 的 参数 
常用 ActionScript 语句 
ActionScript 的 编辑 环境 
利用 ActionScript 制作 交互 网 页 动画 


实例 展示 


发 光 翻 转 文字 效果 


网 页 设计 与 网 站 建设 全 攻略 


17.1 ActionScript 概述 


ActionScript 简称 为 AS， 是 Flash 产品 平台 的 脚本 解释 语言 。 该 语言 可 以 实现 Flash 中 内 容 与 
内 容 、 内 容 与 用 户 之 间 的 交互 。 


17.1.1 ActionScript 的 发 展 史 


AS 的 解释 工作 由 Action Virtual Machine (AVM) 进行 ，AVM 可 以 称 之 为 AS 虚拟 机 ， 类 似 
于 JVM，AVM 是 Flash Player 播放 器 中 的 一 部 分 。AS 语句 要 想起 作用 ,需要 通过 Flash 创作 工具 
或 Flex 服务 器 将 其 编译 生成 二 进 制 代码 格式 方 可 ， 而 编译 过 的 二 进 制 代码 格式 将 成 为 SWF 文件 
中 的 一 部 分 ， 被 Flash 播放 器 执行 。AS1.0 起 源 于 ECMAScript 标准 ， 由 于 ECMA 的 语法 的 兼容 
性 和 Flash Player 播放 器 的 大 小 和 演 染 引擎 的 需要 ，AS 可 以 称 之 为 是 语法 来 源 于 ECMAScript。 

说 到 AS 不 得 不 说 Flash4 的 AS 集合 ， 它 曾经 让 Flash4 兼容 格式 的 内 容 变化 多 端 。 但 是 在 一 
定 程度 上 ，Flash4 的 AS 不 能 称 之 为 成 熟 的 并 且 为 开发 者 所 承认 的 脚本 语言 集合 。 它 的 语法 方式 
完全 不 同 于 ECMAScript。 虽 然 可 以 在 Flash5 的 时 代 可 以 向 它 添加 一 些 ECMA 效仿 的 语句 上 去 ， 
但 是 AS 在 Flash4 中 是 完全 与 ECMAScript 标准 相左 的 。 现 在 Flash4 的 AS 仍然 可 以 被 应 用 于 Flash 
Litel.1 的 内 容 之 上 。 

AS1.0 是 从 Flashs 的 时 代 诞 生 的 ， 这 时 的 版 本 就 已 经 具备 了 ECMAScript 标准 的 语法 格式 和 
语义 解释 。 尽管 后 来 的 Flash Player5/6 的 播放 器 版 本 (Build) 的 一 再 更 新 , 使 得 越 来 越 多 的 ECMA 
语法 和 语义 被 纳入 到 AS1.0 的 API 中 , 但 是 核心 语言 的 编译 处 理 和 表现 方式 都 是 延续 了 Flashs 的 
AS1.0 的 标准 。 

AS2.0 是 在 MX 时 代 被 慢 慢 引入 的 ， 而 在 MX 2004 版 本 被 开发 者 全 面 采 纳 。AS2.0 的 运行 则 
是 完全 在 Flash Player 6 以 上 的 版 本 中 才 上 有 具备 的 机 制 .AS2.0 在 Flash6 中 都 可 以 运行 ,是 因为 AS2.0 
语句 在 运行 时 (runtime) 环境 下 仍然 采用 了 AS1.0 的 模型 。 这 也 是 为 什么 AS2.0 的 运行 性 能 并 不 
比 AS1.0 优秀 的 重要 原因 。AS2.0 的 编写 方式 则 是 更 加 成 熟 ， 引 入 了 面向 对 象 编程 的 方式 ， 并 且 
有 良好 的 类 型 声明 , 而 且 分 离 了 运行 和 编译 时 的 异常 处 理 。 AS2 在 格式 上 遵循 了 ECMA4 Netscape 
的 语言 方案 ， 但 是 并 不 完全 兼容 ECMAScript 标准 。 虽 然 基 于 AS2 的 开发 方式 从 众多 开发 者 眼中 
襄 贬 不 一 ， 但 是 AS2 为 了 AS3.0 的 诞生 铺设 了 一 条 康 庄 大 道 。 

AS3.0 的 规范 已 经 出 来 了 ， 而 AS3.0 也 是 未 来 Flash 开发 脚本 的 核心 。AS3 的 播放 器 只 有 从 
Flash Player 8.5 以 上 版 本 开始 支持 ， 也 就 是 现在 用 到 的 Flex 2.0 Beta 才 可 以 对 AS3 进行 编译 的 工 
作 。AS3 有 着 很 多 不 同 之 处 ， 它 全 面 支持 ECMA4 的 语言 标准 ， 意 味 着 AS3 将 具有 ECMAScript 
中 的 Package/ 命 名 空间 namespace 等 多 项 AS2 不 具备 的 特点 。AS3 将 全 面 支持 E4X， 也 就 是 支持 
ECMAScrpit for XML 的 标准 。AS3 将 采用 全 新 的 AVM 进行 解释 , 与 AS1/2 的 AVM 将 完全 不 同 。 
此 外 AS3 的 编译 器 也 是 完全 和 AS2 的 编译 器 有 所 不 同 。AS3 的 API 将 更 加 直观 ， 会 去 除 很 多 容 
易 让 人 混淆 的 部 分 ， 添 加 对 ECMA 全 面 的 兼容 性 。 
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17.1.2 ”ActionScript 3.0 的 优点 


@ 对 面向 对 象 编程 (OOP ) 语言 的 完全 支持 。 核 心 语言 基于 ECMAScript (ECMA 262 ) 标 
准 ， 对 OOP 架构 深层 优化 。 

@ 彻底 更 新 的 显示 对 象 系统 架构 。 

@ 采用 了 先进 的 E4X， 使 XML 成 为 ActionScript3 语言 的 内 建 数据 类 型 。 操 作 直 白 、 简 单 。 
与 ActionScript 2 比较 ， 极 大 地 减轻 了 XML 数据 处 理工 作 量 。 

@ 全 面 支持 正则 表达 式 。 正 则 表达 式 也 成 了 ActionScript 3 的 内 建 数 据 类 型 ，ActionScript 3 
对 字符 囊 的 处 理 能 力 空前 增强 。 

@ 标准 的 DOM 3 事件 实现 。Flash API 全 面 支持 事件 机 制 。 

@ 异常 处 理 机 制 。 异 常 包括 信 息 全 面 、 易 于 调试 和 处 理 。EFlash API 全 面 支 持 异常 处 理 机 制 。 
此 外 ，ActionScript 3 积极 迈 向 开源 ， 赢 得 开源 社区 的 欢迎 。 


17.2 ActionScript 3.0 语句 中 的 参数 


下 面 的 内 容 将 具体 介绍 使 用 ActionScript 进行 程序 编写 的 基础 知识 。 
17.2.1 ActionScript 中 的 相关 术语 


像 其 他 脚本 语言 一 样 ， ActionScript 根据 特定 的 语法 规则 使 用 特定 的 术语 。 以 下 将 按 字 母 顺序 
介绍 重要 的 ActionScript 术 语 ， 希 望 能 对 大 家 理解 ActionScript 有 所 帮助 。 

@ Actions (动作 ): 是 指导 Flash 电影 在 播放 时 执行 某 些 操作 的 语句 。 例 如 ，gotoAndStop 动 
作 就 可 以 将 播放 磁头 转移 到 指定 的 帧 或 帧 标识 。 

@ Actions (动作 ) 也 可 以 被 称 为 statement (语句 )。 是 允许 将 值 传递 给 函数 的 占 位 符 。 例 如 ， 
以 下 语句 中 的 函数 Welcome 就 使 用 了 两 个 参数 firstName 和 hobby 来 接收 值 : 

funCtion Welcome (firstName,hobby){ 

WelcomeText="Hell0, "firstName+"I See you enjoy"+hobby; } 

@ Lasses (类 ): 是 各 种 数据 类 型 。 用户 可 以 创建 “类 ”并 定义 对 象 的 新 类 型 。 要 定义 对 象 的 
类 ， 用 户 需 创建 构造 器 函数 。 

@ Contnts (常量 ): 是 不 会 改变 的 元 素 。 常 量 对 于 值 的 比较 非常 有 用 。 

@ Constructors (构造 器 ): 是 用 来 定义 “类 ”的 属性 和 方法 的 函数 。 以 下 代码 通过 创建 Circle 
构造 器 函数 生成 了 一 个 新 的 Circle 类 : 

function Circle(x, y,radius){ 

this.x=x; 

this.y=y; 

this.radius=radius; 

上 


@ Data Types (数据 类 型 ) 是 可 以 执行 的 千 组 值 和 操作 。ActionScript 的 数据 类 型 包括 字符 
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串 、 数 值 、 罗 辑 值 、 对 象 和 电影 剪辑 。 

@ Events (事件 ): 是 在 电影 播放 过 程 中 发 生 的 动作 。 例 如 ， 当 电影 载 入 时 、 当 播放 磁头 到 达 
某 一 帧 时 、 当 用 户 单 击 按钮 或 电影 剪辑 时 、 当 用 户 按压 键盘 上 的 按键 时 ， 都 会 产生 不 同 的 
事件 。 

@ Expressions (表达 式 ): 是 可 以 产生 值 的 语句 。 例 如 ，2+2 就 是 一 个 表达 式 。 

@ Functions ( 函数 ): 是 可 以 重复 使 用 和 传递 参数 的 代码 段 , 可 以 返回 一 个 值 . 例如 ,getPrope 
函数 就 可 以 使 用 电影 剪辑 的 实例 名 称 和 属性 名 称 ， 返 回 属性 值 。getVersion 函数 可 以 返回 
当前 播放 电影 的 Flash 播放 器 的 版 本 。 

@ Handlers (句柄 ): 是 可 以 管理 诸如 mouseDown 或 load 事件 的 特殊 动作 。 例 如 ， 
onMouseEvent 和 onClipEvent 就 是 ActionScript 的 句柄 。 

@ Identtifiers (标识 符 ); 是 用 来 指示 变量 、 必 性、 对象、 函数 或 方法 的 名 称 。 标 识 符 的 首 字 
母 必 须 是 字符 、 下 划 线 (_) 或 美元 符号 ($ )。 后 续 字符 可 以 是 字符 、 数 字 、 下 划 线 或 美 
元 符号 。 例 如 ，firstName 就 是 一 个 变量 名 。 

@ Instances (实例 ): 是 属于 某 些 Class (类 ) 的 对 象 。 每 个 类 的 实例 都 包含 该 类 的 所 有 属性 
和 方法 。 例 如 ， 所 有 电影 剪辑 实例 都 包含 MovieClip 类 的 属性 (透明度 属性 、 可 见 性 属性 
等 ) 和 方法 (例如 gotoAndPlay、getURL 等 )。 

@ Instancenames ( 实例 名 称 ): 是 一 个 唯一 的 名 称 。 可 以 在 脚本 中 作为 目标 被 指定 。 

@ Keywords (关键 字 ): 是 具有 特殊 意义 的 保留 用 词 。 例 如 ，var 就 是 一 个 关键 字 ， 它 可 以 用 

@ Methods (方法 ): 是 指定 给 对 象 的 函数 。 在 函数 被 指定 给 对 象 之 后 ， 该 函数 就 可 以 被 称 为 
是 该 对 象 的 方法 。 例如， 在 以 下 示例 中 ，clear 就 变 成 了 controller 对 象 的 方法 : 

function Reset(){ 

x Pos=0， 

x Pos=0， 

4 


Controller.clear=Reset; 
Controller.clear (); 


@ Objects (对 象 ): 是 属性 的 集合 。 每 个 对 象 都 有 自己 的 名 称 和 值 。 对 象 允许 用 户 访问 某 些 
类 型 的 信息 。 例 如 ，ActionScript 的 预定 义 对象 Date 就 提供 了 系统 时 钟 方面 的 信息 。 

@ Operands (运算 项 ): 是 由 表达 式 中 的 运算 符 操控 的 值 。 

@ Operators (运算 符 ): 可 以 从 一 个 或 多 个 值 中 计算 获得 新 值 。 例 如 ， 将 两 个 数值 相 加 就 可 
以 获得 一 个 新 值 。 

@ Parameters ( 参数) 也 被 称 之 为 Argument ( 参数 )。 

@ PropeMes (属性 ): 是 定义 对 象 的 attributes ( 属性 )。 例 如 ， 所 有 电影 剪辑 对 象 都 具有 一 个 
visible (可见 性 ) 属性 ， 通 过 该 属性 可 以 决定 电影 剪辑 是 否 显示 。 

@ Targetpaths ( 目标 路 径 ): 是 Flash 电影 中 电影 剪辑 名 称 、 变 量 和 对 象 的 垂直 分 层 结构 地 址 。 
主 时 间 轴 的 名 称 是 root。 在 电影 剪辑 属性 检查 器 中 可 以 命名 电影 剪辑 的 实例 。 


用 户 可 以 通过 目标 路 径 使 动作 指向 电影 剪辑 ， 也 可 以 使 用 目标 路 径 获取 或 设置 变量 的 值 。 
例如 ， 以 下 示例 语句 就 是 电影 剪辑 stereoControl 内 部 的 变量 volume 的 路 径 : 


362 


第 17 章 使 用 Flash CC 创建 交互 动画 (9 


_root.stereoControl .volume 


@ Variables (变量 ): 是 存储 了 任意 数据 类 型 值 的 标识 符 。 变 量 可 以 
中 存储 的 值 可 以 被 脚本 检索 使 用 。 在 以 下 示例 中 ， 等 号 左边 的 是 
赋予 变量 的 值 : 

X=5; 

name="Lolo"; 


customer.address="66 7th Street"; 
c=new Color (mcinstanceName) 7 


创建 、 修 改 和 更 新 。 变量 
变量 标识 符 ， 右 边 的 则 是 


17.2.2 ”ActionScript 3.0 基本 语法 


ActionScript 的 语法 是 ActionScript 编程 中 十 分 重要 的 组 成 部 分 , 和 其 他 类 型 的 编程 语言 相同 ， 
只 有 对 其 语法 有 了 充分 的 认识 ， 才 能 在 编写 程序 的 过 程 中 游 九 有余， 编写 出 精彩 的 程序 。 下 面 将 
详细 介绍 ActionScript 的 基本 语法 。 

1. 点 语法 


在 Flash 动画 中 ， 对 当前 场景 下 的 影片 剪辑 实例 的 控制 是 十 分 常见 的 功能 。 在 以 前 的 Flash 
版 本 中 ，tellTarget 就 可 以 告诉 程序 目的 所 在 ， 其 作用 就 是 要 告知 程序 要 做 什么 样 的 特定 动作 。 如 
果 再 结合 程序 的 实际 情况 在 其 中 加 入 对 影片 的 控制 动作 ， 就 能 控制 实例 的 动画 播放 过 程 了 。 

例如 ， 要 使 实例 syc 移动 到 第 30 帧 并 停止 ， 可 以 编写 为 

tellTarget ("syc"){ 

gotoAndstop (30); 

} 

这 种 语法 在 以 前 版 本 的 Flash 中 曾经 被 广泛 应 用 ， 不 过 现在 并 不 推荐 使 用 tellTarget 语法 ， 而 
是 使 用 一 种 更 为 简洁 的 语法 形式 取代 它 ， 这 就 是 点 语法 。 

点 语法 的 由 来 是 因为 其 在 编程 语句 中 使 用 了 一 个 “.”。 它 是 一 种 基于 “面向 对 象 ” 概 念 的 语 
法 形式 , 所 谓 面向 对 象 就 是 利用 目标 物体 自身 去 管理 自己 , 而 物体 本 身 就 是 其 自身 的 特性 和 方法 ， 
即 只 要 告诉 物体 该 做 什么 ， 它 就 会 自动 完成 任务 。 

例如 ， 上 面 的 例子 ， 在 使 用 点 语法 后 可 以 将 程序 语句 简化 为 

syc.gotoAndstop (30); 

这 样 一 来 ， 就 大 大 简化 了 语句 的 编写 步骤 。 

在 ActionScript 中 ,“.” 不 但 被 用 于 指出 与 一 个 对 象 或 影片 剪辑 相关 的 属性 或 方法 ,还 被 用 于 
标识 指向 一 个 影片 剪辑 或 变量 的 目标 路 径 。 点 语法 的 表达 式 是 由 一 个 带 有 点 的 对 象 或 者 影片 剪辑 
的 名 字 作 为 起 始 ， 以 对 象 的 属性 、 方 法 或 者 想 要 指定 的 变量 作为 表达 式 的 结束 。 例 如 ， 前 边 所 提 
到 的 例子 中 ，syc 就 是 影片 剪辑 的 名 字 ， 而 “.” 的 作用 就 是 要 告诉 影片 剪辑 执行 后 面 的 动作 。 

2. 小 括号 


小 括号 用 于 定义 函数 中 的 相关 参数 ， 例 如 : 
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function Line(xl,x2,yl,y2) {} 


此 外 ， 还 可 以 通过 使 用 小 括号 来 调整 ActionScript 操作 符 的 优先 顺序 、 对 一 个 表达 式 求 值 或 


者 提高 程序 的 可 读 性 。 
3. 大 括号 
当 一 段 ActionScript 程序 语句 被 大 括号 括 起 来 ， 就 会 形成 一 个 语句 块 。 
4. 分 号 


在 ActionScript 中 ， 任 何 一 条 语句 的 结束 都 需要 使 用 分 号 来 结尾 。 不 过 ， 如 果 忽 略 了 使 用 分 
号 作为 脚本 语句 的 结束 标志 ， 新 版 的 Flash 同样 可 以 成 功 编译 这 个 脚本 。 


5. 注释 


在 脚本 的 编写 过 程 中 ， 为 了 能 够 使 某 个 部 分 的 代码 更 方便 地 被 程序 阅读 者 理解 ， 因 此 需要 使 
用 comment 注释 语句 对 程序 添加 注释 信息 。 


function Line(xl,x2,yl,y2) {} 
// 定 义 Line 函数 


在 动作 编辑 区 中 ， 注 释 一 般 用 于 区 别 程序 语句 的 灰色 显示 。 
6. 字母 的 大 小 写 
在 ActionScript 的 语法 中 ， 只 有 关键 字 是 需要 区 分 大 小 写 的 ， 其 他 的 ActionScript 代码 ， 则 不 


例如 ， 下 面 的 程序 在 编译 的 时 候 是 完全 等 价 的 : 

Name=gaolu 

NAME=gaolu 

name=gaolu 

不 过 ， 为 了 方便 区 分 变量 名 、 函 数 名 或 者 函数 ， 在 实际 的 程序 编写 中 还 是 应 该 固定 使 用 大 写 
或 者 小 写 。 

7. 分 号 和 常量 

在 ActionScript 中 ,“;” 表 示 一 个 语句 的 结束 。 但 如 果 在 代码 中 忘记 加 上 分 号 其 实 也 没有 关系 ， 
编译 程序 会 自动 加 上 。 但 是 良好 的 习惯 要 求 大 家 一 定 要 在 语句 结束 时 加 上 “;”， 因 为 无 论 是 以 后 
自己 查 错 或 阅读 都 能 减少 很 多 不 必要 的 麻烦 ， 使 程序 更 清楚 也 更 严谨 。 在 ActionScript 中 有 些 内 
容 是 固定 不 变 的 , 可 以 在 编程 时 引用 它 ,例如 一 些 常用 的 按键 的 键 值 ,再 如 布尔 值 中 的 true 和 false。 


17.3 ”常用 ActionScript 语 句 


在 Flash 中 经 常用 到 的 语句 是 条 件 语 句 和 循环 语句 。 条 件 语 句 包括 让 语 句 、 特 殊 条 件 语句 ， 
循环 语句 包括 while 循环 、for 循环 语句 。 
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17.3.1 for 循环 


在 现实 生活 中 有 很 多 规律 性 的 操作 ， 作 为 程序 来 说 就 是 要 重复 执行 某 些 代码 。 其 中 重复 执行 
的 代码 称 为 循环 体 ， 能 否 重 复 操作 ， 取 决 于 循环 的 控制 条 件 。 循 环 语句 可 以 认为 是 由 循环 体 和 控 
制 条 件 两 部 分 组 成 。 
循环 程序 结构 的 结构 一 般 认为 有 两 种 : 
一 种 先进 行 条 件 判断 ， 若 条 件 成 立 ， 执 行 循环 体 代码 ， 执 行 完 之 后 再 进行 条 件 判断 ， 条 件 
成 立 继续 ， 否 则 退出 循环 。 若 第 一 次 条 件 就 不 满足 ， 则 一 次 也 不 执行 ， 直 接 退 出 。 
昌 另 一 种 是 先 执行 依次 操作 ， 不 管 条 件 ， 执 行 完成 之 后 进行 条 件 判断 。 若 条 件 成 立 ， 循 环 继 
续 ， 否 则 退出 循环 。 


for 循环 语句 是 ActionScript 编程 语言 中 最 灵活 、 应 用 最 为 广泛 的 语句 。 
for 循环 的 语法 格式 如 下 : 

For (初始 化 条 件 改变 变量 ) { 

语句 


} 


在 “初始 化 ”中 定义 循环 变量 的 “初始 值 ”，“ 条 件 ” 是 确定 什么 时 候 退 出 循环 ,“ 改 变 变 量 ” 
是 指 循环 变量 每 次 改变 的 值 。 例 如 : 

trace=0 

forl(var i=1 i<=30 i++ { 

trace = trace +i 

} 

以 上 实例 中 , 初始 化 循环 变量 i 为 1, 每 循环 一 次 , i 就 加 1， 并 且 执 行 一 次 “trace = trace +i”， 
直到 i 等 于 30， 停 止 增加 trace。 


17.3.2 while 和 do while 循环 


while 语句 可 以 重复 执行 某 条 语句 或 某 段 程序 ,使 用 while 语句 时 , 系统 会 先 计算 一 个 表达 式 ， 
如 果 表达 式 的 值 为 ttue， 就 执行 循环 的 代码 。 在 执行 完 循环 的 每 一 个 语句 之 后 ，while 语句 会 再 次 
对 该 表达 式 进行 计算 。 当 表达 式 的 值 仍 为 tue 时 ， 会 再 次 执行 循环 体 中 的 语句 ， 直 到 表达 式 的 值 
为 false。 

do while 语句 与 while 语句 一 样 可 以 创建 相同 的 循环 。 这 里 要 注意 的 是 ，do while 语句 对 表达 
式 的 判定 是 在 其 循环 结束 处 ， 因 而 使 用 do while 语句 至 少 会 执行 一 次 循环 。 

for 语句 的 特点 是 有 确定 的 循环 次 数 ， 而 while 和 do while 语句 没有 确定 的 循环 次 数 ， 具 体 使 
用 格式 如 下 。 


while (条 件 ) { 
语句 


} 
以 上 代码 只 要 满足 “条件” 就 一 直 执行 “语句 ”的 内 容 。 
do{ 
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语句 
}while (条 件 ) 


SS 


认 …else 条 件 语句 判断 一 个 控制 条 件 ， 如 果 该 条 件 能 够 成 立 ， 则 执行 一 个 代码 块 ， 否 则 执行 
另 一 个 代码 块 。 

if…else 条 件 语句 基本 格式 如 下 : 

if (表达 式 ) { 

语句 1 

1 


else 


{ 
语句 27 


例如 下 列 语句 : 


input="mymovie" 

if (input==Flash&&passward==841113) { 
gotoaAndPlay (play); 

3 
gotoAndPlay (wrong); 


当 程序 执行 至 此 处 时 ， 将 会 先 判 断 给 定 的 条 件 是 否 为 真 ， 若 条 件 式 (input) 和 (passward) 
的 值 为 真 , 则 执行 f 语 句 的 内 容 (gotoAndPlay), 然后 继续 后 面 的 流程 。 若 条 件 (input) 和 (passward) 
为 假 ， 则 跳 过 让 语句 ， 直 接 执行 后 面 的 流程 语句 。 

另外 ， 认 经 常 与 else 结合 使 用 ， 用 于 多 重 条 件 的 判断 和 跳 转 执行 。 例 如 下 列 语句 


input="mymovie" 

if (input==Flash&&passward==841113) { 
gotoaAndPlay (play); 

} 

else{ 

gotoAndPlay ("moviedescription"); 

} 


当 让 语句 的 条 件 式 (condition〉 的 值 为 真 时 ， 执 行 让 语句 的 内 容 ， 跳 过 else 语句 。 反 之 ,将 
跳 过 论语 句 ， 直 接 执行 else 语句 的 内 容 。 再 例如 下 列 语句 : 


input="mymovie" 

if (input==Flash&&passward==841113) { 
gotoAndPlay (Play) ; 

} 

else if (input==Flash&g&passward==831210) { 
gotoAndPlay (play); 

} 

elsef 
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gotoAndPlay ("moviedescription"); 


17.3.4 ”特殊 条 件 判断 


特殊 条 件 判断 语句 一 般 用 于 赋值 ， 本 质 是 一 种 计算 形式 ， 格 式 为 : 

变量 a= 判 断 条 件 ? 表达 式 1: 表达 式 2; 

如 果 判 断 条 件 成 立 ，a 就 取 表 达 式 1 的 值 ， 如 果 不 成 立 就 取 表达 式 2 的 值 。 
例如 : 


Var a: Number=1 
Var b: Number=2 
Var max: Number=a>ba: b 


执行 以 后 ，max 就 为 a 和 b 中 较 大 的 值 ， 即 值 为 2。 
17.4 ActionScript 的 编辑 环境 


“动作 ”面板 是 专门 用 来 编写 ActionScript 语言 的 ， 在 学 习 ActionScript 脚本 之 前 ， 首 先 来 熟 
悉 一 下 “动作 ”面板 的 界面 。 如 果 在 工作 界面 上 看 不 到 “动作 ”面板 ， 可 以 执行 “窗口 ” |“ 动作 ” 
命令 ， 或 使 用 F9 快捷 键 打开 “动作 ”面板 ， 如 图 17-1 所 示 。 在 动作 面板 中 可 以 输入 需要 添加 的 
代码 。 
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17.5 利用 ActionScript 制作 交互 网 页 动画 


制作 Flash 动画 的 时 候 , 使 用 ActionScript 给 动画 添加 交互 性 .使 用 ActionScript 可 以 控制 Flash 
动画 中 的 对 象 ， 扩 展 Flash 创作 交互 动画 和 网 络 应 用 的 能 力 。 
17.5.1 实战 1 一 一 创建 多 种 图 片 过 渡 效果 


本 实例 实现 的 图 片 过 渡 效 果 有 百叶 窗 、 淡 入 淡出 、 飞 行 光圈 、 强 光 过 渡 、 旋 转 、 挤 压 、 划 过 、 
像素 溶解 、 放 大 几 种 图 片 过 渡 效 果 ， 如 图 17-2 所 示 ， 具 体操 作 步 又 如 下 。 


图 17-2 图 片 过 渡 效 果 


原始 文件 ， 原始 文件 /17/1.jpg 
最 终 文件 ， 最 终 文件 /17/ 图 片 过 渡 效 果 .f1a 


步骤 01 启动 Flash CC， 执 行 “文件 ”| “新建 ”命令 ， 弹 出 “新 建 ”对 话 框 ， 将 “宽度 ”设置 
为 700，“ 高 ”设置 为 500，“ 背 景 颜色 ”设置 为 粉色 ， 如 图 17-3 所 示 。 


图 17-3 “新 建文 档 ” 对 话 框 


步骤 024 单 击 “ 确 定 ”按钮 ， 新 建 空白 文档 ， 如 图 17-4 所 示 。 
步骤 034 执行 “文件 ”|“ 导 入 ”|“ 导 入 到 库 ”命令 ， 弹 出 “导入 到 库 ” 对 话 框 ， 选 择 要 导入 的 
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图 像 文件 ， 如 图 17-5 所 示 。 


17-4 ”新 建 空白 文档 图 17-5 “导入 到 库 ” 对 话 框 


步骤 044 单 击 “打开 ”按钮 ， 置 入 图 像 文件 到 “ 库 ” 面 板 中 ， 如 图 17-6 所 示 。 

步骤 05 在 “ 库 ” 面 板 中 将 导入 的 图 像 拖 入 到 舞台 中 ， 如 图 17-7 所 示 。 

步骤 064 选中 拖 入 的 图 像 ， 执 行 “ 修 改 ”|“ 转 换 为 元 件 ” 命 令 ， 弹 出 “转换 为 元 件 ” 对 话 框 ， 
将 “名 称 ” 设 置 为 box，“ 类 型 ”设置 为 “影片 剪辑 ”， 如 图 17-8 所 示 。 

步骤 07 单 击 “ 确 定 ” 按 钮 ， 将 其 转换 为 元 件 ， 将 “实例 名 称 ” 设 置 为 bbx1， 如 图 17-9 所 示 。 


图 17-6 置 入 图 像 图 17-7 拖 入 图 像 


图 17-8 “转换 为 元 件 ” 对 话 框 图 17-9 转换 为 元 件 
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步 聂 08 4 选中 box1， 按 住 Ctrl 键 拖 动 进行 复制 操作 ， 复 制 出 10 个 影片 剪辑 ， 在 “属性 ”面板 中 
分 别 为 实例 命名 box2，box3，.…，box10， 如 图 17-10 所 示 。 
步骤 094 单 击 时间 轴 面板 中 的 “新 建 图 层 ” 按 钮 ， 新 建 图 层 2， 如 图 17-11 所 示 。 


图 17-10 复制 影片 剪辑 图 17-11 新 建 图 层 2 
步骤 104 选中 第 1 帧 ， 打 开动 作 面板 ， 输 入 代码 ， 如 图 17-12 所 示 。 


图 17-12 输入 代码 


17.5.2 ”实战 2 一 一 创建 精美 的 遮 罩 动画 效果 


利用 Flash AS3 代码 创建 好 看 的 遮 音 动画 效果 ， 在 一 个 图 像 上 创建 多 个 大 小 不 同 椭圆 的 运动 
谈 单 ， 如 图 17-13 所 示 ， 具 体操 作 步 又 如 下 。 
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图 17-13” 遮 界 动画 效果 


原始 文件 : 原始 文件 /17/2 .jpg 
最 终 文件 : 最 终 文件 /17/ 遮 畦 动 画 效果 .Fla 


步骤 01 启动 Flash CC， 执 行 “文件 ”|“ 新 建 ”命令 ， 新 建 空白 文档 ， 导 入 图 像 文 件 并 修改 图 
像 和 文档 大 小 一 致 ， 如 图 17-14 所 示 。 


图 17-14 新建 文档 
步 又 024 选择 导入 的 图 像 ， 执 行 “ 修 改 ”| “转换 为 元 件 ” 命 令 ， 弹 出 “转换 为 元 件 ” 对 话 框 ， 
将 “名 称 ” 设 置 为 Background，“ 类 型 ”设置 为 “影片 剪辑 ”， 如 图 17-15 所 示 。 
步骤 034 单 击 “ 确 定 ” 按 钮 ， 将 其 转换 为 影片 剪辑 元 件 ， 在 “属性 ”面板 中 将 实例 名 称 设置 为 
backgroundImage， 如 图 17-16 所 示 。 


Eco | 全 是 : 
EE ] 对 到 月 


图 17-15 “转换 为 元 件 ” 对 话 框 图 17-16 设置 实例 名 称 为 “backgroundImage” 
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步 野 044 单 击 时 间 轴 中 的 “新 建 图 层 ” 按 钮 ， 新 建 图 层 2， 选 择 工具 箱 中 的 “椭圆 ”工具 ， 在 舞 
全 中 绘制 椭圆 ， 如 图 17-17 所 示 。 

步 最 054 选择 绘制 的 椭圆 ， 执 行 “ 修 改 ”|“ 转 换 为 元 件 ” 命 令 ， 弹 出 “转换 为 元 件 ” 对 话 框 ， 
将 “名 称 ” 设 置 为 My Mask，“ 类 型 ”设置 为 “影片 剪辑 ”， 单 击 “ 高 级 ”选项 ， 勾 
选 “为 ActionSctript 导出 ”， 将 “类 ”名 称 设置 为 MyMask， 如 图 17-18 所 示 。 

步 最 064 单 击 “ 确 定 ”按钮 ， 将 其 转换 为 影片 剪辑 元 件 ， 在 舞 全 中 删除 元 件 ， 如 图 17-19 所 示 。 


步 又 07 4 执行 “文件 ” |“ 新建” 命令 ， 弹 出“ 新建 文档 ”对 话 框 ， 单 击 选 择 “ActionScript 文件 ” 
选项 ， 如 图 17-20 所 示 。 


17-17 绘制 椭圆 图 17-18 “转换 为 元 件 ” 对 话 框 


图 17-19 删除 元 件 图 17-20 “新 建文 档 ” 对 话 框 


步 又 08 4 单 击 “ 确 定 ” 按 钮 ， 进 入 编辑 区 ， 在 编辑 器 中 输入 代码 ， 如 图 17-21 所 示 。 
步骤 09 公 执行 “文件 ”| “另存 为 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 选 择 文件 要 存储 的 位 置 ， 将 
“文件 名 ”设置 为 MyMask.as， 如 图 17-22 所 示 。 
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图 17-21 输入 代码 图 17-22 “另存 为 ”对 话 框 


步骤 104 单 击 “ 保 存 ” 按 钮 ， 保 存 文档 。 切换 到 刚刚 制作 的 文档 ， 选 择 图 层 2 的 第 1 帧 ， 打 开 
“动作 ”面板 ， 输 入 代码 用 来 设置 动画 的 遮 音 效果， 如 图 17-23 所 示 。 

步骤 114 执行 “文件 ”| “另存 为 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 将 其 保存 在 My Mask 同一 文 
件 夹 下 ， 如 图 17-24 所 示 。 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 文档 的 制作 。 


图 17-23 输入 代码 图 17-24 “另存 为 ”对 话 框 
17.5.3 ”实战 3 一 一 制作 下 雨 效果 


本 实例 利用 Flash 制作 简单 的 下 十 效果 ， 如 图 17-25 所 示 ， 有 具体 操作 步骤 如 下 。 
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图 17-25 下 雨 效果 


原始 文件 ， 原始 文件 /17/3.jpg 
最 终 文件 ， 最 终 文件 /17/ 小 雨 效果 .Fla 


步骤 01 启动 Flash CC， 执 行 “文件 ”|“ 新 建 ”命令 ， 新 建 空白 文档 ， 导 入 图 像 文件 并 修改 
像 和 文档 大 小 一 致 ， 如 图 17-26 所 示 。 
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图 17-26 新 建文 档 


步骤 024 执行 “插入 ”| “新建 元 件 ” 命 令 ， 弹 出 “创建 新 元 件 ”对 话 框 ， 将 “名 称 ” 设 置 为 xl， 
“类 型 ” 设置 为 “影片 剪辑 ”， 单 击 “ 高 级 ”选项 , 勾 选 “为 Actionscript 导出 ” 复 选 框 ， 
将 “类 ”名 称 也 设置 为 xl， 如 图 17-27 所 示 。 

步骤 034 单 击 “ 确 定 ”按钮 ， 进 入 影片 剪辑 编辑 中 心 ， 选 择 工具 箱 中 的 “线条 ”工具 ， 在 舞台 
中 绘制 线条 作为 雨点 ， 将 上 舞台 放大 到 400%， 如 图 17-28 所 示 。 
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图 17-27 “创建 新 元 件 ” 对 话 框 图 17-28 绘制 线条 


步骤 044 选择 图 层 1 并 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 传统 运动 引导 层 ” 命 令 ， 
如 图 17-29 所 示 。 

步骤 054 选择 后 添加 运动 引导 层 ， 如 图 17-30 所 示 。 

步 最 064 选择 引导 层 的 第 1 帧 ， 选 择 工具 箱 中 的 “铅笔 ”工具 ， 在 舞台 中 绘制 曲线 作为 雨点 下 
落 的 轨道 ， 如 图 17-31 所 示 。 

步骤 07M 选择 图 层 1 的 第 30 帧 ， 按 F6 键 插入 关键 帧 ， 在 引导 层 的 第 30 帧 按 F5 键 插入 帧 ， 选 
择 第 1 帧 将 绘制 的 雨点 短线 移动 到 引导 线 的 顶端 ， 如 图 17-32 所 示 。 
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图 17-31 绘制 曲线 图 17-32 移动 雨点 到 顶端 
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步 又 08 4 单 击 选择 图 层 1 的 第 30 帧 ， 将 绘制 的 雨点 移动 到 引导 线 的 底 端 ， 如 图 17-33 所 示 。 
步骤 09 在 图 层 1 的 第 1~30 帧 之 间 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 问 ” 
动画 选项 ， 创 建 补 间 动 画 ， 如 图 17-34 所 示 。 
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图 17-33 移动 雨点 到 底 端 图 17-34 ”创建 补 间 动 画 


步骤 104 单 击 “ 场 景 1” 按 钮 ， 返回 到 主场 景 ， 单 击 “ 新 建 图 层 ” 按 钮 ， 新建 图 层 2， 如 图 17-35 
所 示 。 


图 17-35 新 建 图 层 2 


步 骆 114 选择 图 层 2 的 第 1 帧 ， 打 开 “ 动 作 ” 面板， 输入 代码 ， 用 来 让 雨点 随机 的 落下 ， 如 图 
17-36 所 示 。 


图 17-36 输入 代码 
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17.5.4 ”实战 4 一 一 制作 翻转 发 光 文字 效果 


本 实例 用 发 光 滤 镜 使 文字 产生 发 光 的 效果 ， 如 图 17-37 所 示 。 需 要 注意 的 是 ， 这 个 实例 需要 
TweenMax 类 ， 在 最 终 文件 中 gs 类 库 保 存在 fla 同一 目录 下 。 有 具体 操作 步骤 如 下 。 


17-37 “发光 翻转 文字 效果 


原始 文件 : 原始 文件 /17/4.jpPg 
最 终 文件 : 最 终 文件 /17/ 发 光 翻 转 文字 .Fla 


步骤 014 启动 Flash CC， 执 行 “文件 ”|“ 新 建 ”命令 ， 新 建 空白 文档 ， 导 入 图 像 文件 并 修改 
像 和 文档 大 小 一 致 ， 如 图 17-38 所 示 。 
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图 17-38 导入 图 像 文件 
步骤 024 单 击 “新 建 图 层 ” 按 钮 ， 新 建 图 层 4， 选 择 工具 箱 中 的 “文本 ”工具 ， 在 舞台 中 输入 文 


字 Christmas， 在 “属性 ”面板 中 设置 字体 样式 和 字体 大 小 ， 如 图 17-39 所 示 。 
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图 17-39 输入 文字 
步骤 034 选择 输入 的 文字 ， 执 行 “ 修 改 ”| “分离 ”命令 ,分离 文 字 ， 如 图 17-40 所 示 。 
步 最 044 选择 分 离 的 文字 ， 打 开 “ 属 性 ”面板 ， 单 击 “ 添 加 滤 镜 ”按钮 ， 在 弹出 的 列表 中 选择 
“发 光 ” 选 项 ， 如 图 17-41 所 示 。 


图 17-40 ”分离 文 字 图 17-41 选择 “发 光 ” 选 项 
步 最 054 选择 以 后 添加 发 光 效 果 ， 将 “模糊 ”设置 为 1 5， 颜色 设置 为 绿色 ， 如 图 17-42 所 示 。 
步 坚 064 选中 单个 字母 C 按 F8 键 ， 弹 出 “转换 为 元 件 ” 对 话 框 ， 将 “名 称 ” 设 置 为 01，“ 类 
型 ”设置 为 “影片 剪辑 ”， 如 图 17-43 所 示 。 
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图 17-42 添加 发 光 效果 图 1743 “转换 为 元 件 ” 对 话 框 
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步骤 07 人 和 单 击 “ 确 定 ” 按 钮 ， 将 其 转换 为 元 件 ， 在 “ 库 ” 面 板 中 也 可 以 看 到 转换 后 的 元 件 ， 如 
图 17-44 所 示 。 


图 17-44 ”转换 为 元 件 


步骤 08M 重复 步骤 6~7， 将 其 余 字母 逐个 转换 为 元 件 ， 如 图 17-45 所 示 。 


图 17-45 ”转换 其 余 字 母 


步骤 094 单 击 场景 按钮 ， 返 回 到 主场 景 。 单 击 “新 建 图 层 ” 按 钮 ， 新 建 图 层 5， 打 开 “ 动 作 ” 面 
板 ， 输 入 代码 用 来 显示 各 个 字母 发 光 旋 转 效 果 ， 如 图 17-46 所 示 。 


图 1746 输入 代码 
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第 18 章 网 站 的 整体 策划 


本 章 导 读 


网 站 策划 是 整个 网 站 构建 的 灵魂 ， 网 站 策划 在 某 种 意义 上 就 是 一 个 导演 ， 它 引领 了 网 站 的 
方向 ， 赋 予 网 站 生命 ， 并 决定 着 它 能 否 走向 成 功 。 本 章 主 要 介绍 为 什么 要 进行 网 站 策划 、 怎 样 
进行 网 站 策划 、 如 何 确定 网 站 定位 、 网 站 的 目标 用 户 ， 以 及 网 站 的 内 容 策 划 。 


技术 要 点 


为 什么 要 进行 网 站 策划 
怎样 进行 网 站 策划 

如 何 确定 网 站 的 定位 
确定 网 站 的 目标 用 户 

网 站 的 内 容 策划 


18.1 为 什么 要 进行 网 站 策划 


网 站 策划 是 指 在 网 站 建设 前 对 市 场 进行 分 析 ， 确 定 网 站 的 功能 和 要 面 对 的 用 户 ， 并 根据 需要 
对 网 站 建设 中 的 技术 、 内 容 、 费 用 、 测 试 、 推 广 和 维护 等 做 出 策划 。 网 站 策划 对 网 站 建设 起 到 计 
划 和 指导 的 作用 。 

一 个 网 站 的 成 功 与 否 和 网 站 策划 有 着 极为 重要 的 关系 。 在 建立 网 站 前 ， 应 明确 建设 网 站 的 目 
的 ， 确 定 网 站 的 功能 ， 确 定 网 站 规模 ， 投 入 费用 ， 明 确 要 做 成 什么 样 的 网 站 ， 网 站 建成 后 面 对 的 
是 广大 网 民 ， 还 是 有 针对 性 的 客户 。 这 些 问题 具有 详细 规划 并 进行 必要 的 市 场 分 析 ， 才 能 避免 在 
网 站 建设 中 出 现 很 多 问题 ， 使 网 站 建设 顺利 进行 。 

为 什么 目前 大 部 分 的 网 站 会 成 为 摆设 ? 为 什么 数 以 百 万 计 的 网 站 无 声 无 息 ? 为 什么 同样 的 
网 站 模式 却 有 着 截然 不 同 的 价值 ? 其 实 很 简单 ， 因 为 这 些 网 站 根本 没有 事先 进行 全 面 的 策划 ， 很 
多 网 站 还 没有 意识 到 网 站 策划 的 重要 意义 。 网 站 策划 是 网 站 建设 过 程 中 最 重要 的 一 部 分 ， 从 网 站 
如 何 架设 ， 到 确定 网 站 的 浏览 人 群 、 受 众 目 标 ， 再 到 网 站 的 栏目 设置 、 宣 传 推 广 策略 、 更 新 维护 
等 都 需要 慎重 而 续 密 的 策划 。 

一 个 成 功 的 网 站 ， 不 在 于 投资 多 少 钱 ， 不 在 于 有 多 少 高 深 的 技术 ， 也 不 在 于 市 场 有 多 大 ， 而 
在 于 这 个 网 站 是 否 符合 市 场 需求 ， 是 否 符合 体验 习惯 ， 是 否 符合 运营 基础 。 专 业 的 网 站 策划 可 以 
带 来 以 下 几 个 好 处 : 
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@ 避免 日 后 返工 ， 提 高 运营 效率 。 很 多 网 站 投资 人 不 是 IT 行业 人 士 ， 以 为 有 了 网 站 开发 人 
员 、 编 辑 人 员 和 市 场 人 员 就 可 以 将 一 个 网 站 运营 成 功 。 但 是 当 网 站 建设 好 后 ， 市 场 工作 却 
无 法 展开 。 为 什么 ?因为 技术 人 员 总 是 在 不 断 地 修改 网 站 ， 而 技术 人 员 也 总 是 叫苦 连天 ， 
因为 老板 今天 要 求 这 样 明天 要 求 那 样 。 所 以 ， 为 了 避免 以 后 不 停 地 返工 修改 网 站 ， 事 先 对 
网 站 的 各 个 环节 进行 细致 的 策划 是 非常 必要 的 。 

@ 避免 重复 烧 钱 ， 节 约 运营 成 本 。 当 网 站 建设 好 后 ， 为 什么 总 是 没有 用 户 呢 ? 然后 花 很 多 钱 
去 推广 ， 到 最 后 也 没有 留 住 用 户 。 那 是 因为 网 站 的 各 环节 ， 尤 其 是 用 户 的 体验 环节 定位 出 
了 问题 。 所 以 网 站 做 出 来 之 后 ， 总 是 无 法 留 住 用 户 。 如 果 想 节省 网 站 推广 开支 ， 就 需要 仔 
细 反 省 一 下 网 站 自身 的 定位 ， 做 好 网 站 的 策划 。 

@ 避免 投资 浪费 ， 提 高 成 功 机 率 。 在 投资 网 站 之 前 ， 一 定 要 做 一 次 细致 的 策划 ， 如 市 场 的 考 
察 、 赢 利 模式 的 研究 、 网 站 的 定位 。 只 有 具备 了 专业 的 思考 和 策划 ， 才 能 使 投资 人 的 钱 不 
和 白花， 避免 投资 浪费 。 

@ 避免 教训 ， 成 功 运营 。 当 建设 网 站 时 ， 不 要 以 为 有 了 技术 、 内 容 、 市 场 人 员 就 万 事 大 吉 了 ， 
其 实 不 是 这 样 。 策 划 网 站 时 ， 不 但 是 要 策划 网 站 的 具体 东西 ， 更 多 的 时 候 是 要 策划 网 站 的 
市 场 定位 、 赢 利 模式 、 运 营 模式 、 运 营 成 本 等 重要 的 运营 环节 。 如 果 投 资 人 连 投资 网 站 要 
花 多 少 钱 、 什 么 时 候 有 回报 都 不 了 解 的 话 ， 那 么 投资 这 个 网 站 最 终 也 会 失败 。 


18.2 ”怎样 进行 网 站 策划 


如 果 网 站 策划 得 好 可 以 说 已 经 事半功倍 ， 在 以 后 的 运营 中 会 省 掉 很 多 麻烦 。 如 果 网 站 建设 前 
期 不 做 好 网 站 策划 , 等 网 站 运营 到 一 定 的 程度 时 就 会 发 现 网 站 有 很 多 问题 , 投入 很 多 却 不 见效 果 。 
下 面 讲述 怎样 进行 网 站 策划 。 


18.2.1 网 站 策划 的 原则 

网 站 失败 的 原因 各 不 相同 ， 但 是 成 功 的 原因 却 有 着 相似 的 策划 理念 。 如 果 想 要 自己 的 网 站 成 
功 ， 就 得 借鉴 其 他 网 站 成 功 的 经 验 ， 以 下 这 些 原则 是 一 个 成 功 网 站 必 不 可 少 的 前 提 。 

1. 保持 网 页 的 朴素 


一 个 好 的 网 站 最 重要 的 一 点 就 是 页 面 简单 、 朴 素 。 网 页 设计 者 很 容易 掉 入 这 样 一 个 陷阱 ， 即 
把 所 有 可 能 用 到 的 网 页 技巧 ， 如 漂浮 广告 、 网 页 特效 、GIF 动画 等 都 用 上 。 使 用 一 些 网 页 技巧 无 
可 厚 非 ， 但 如 果 多 了 的 话 就 会 让 访问 者 眼花 练 乱 ， 不 知 所 措 ， 也 不 会 给 他 们 留 下 很 深 的 印象 。 当 
要 使 用 一 个 技术 时 ， 记 住 先 问 一 问 自己 : 在 网 页 上 加 入 这 个 技术 有 什么 价值 ? 是 否 能 更 好 地 向 访 
问 者 表达 网 站 的 主题 ? 

2. 简单 有 效 


许多 人 会 被 网 站 的 奇特 效果 所 迷惑 ， 而 忽视 了 信息 的 有 效 性 。 保 持 简单 的 真正 含义 就 是 : 如 
何 使 网 站 的 信息 与 访问 者 所 需要 的 一 样 ? 应 该 把 技术 和 效果 用 在 适当 的 地 方 , 即 用 在 有 效 信息 上 ， 


381 


( \ IT 


让 访问 者 关注 他 们 想 要 的 东西 。 

3. 了 解 用 户 

发 布 网 站 的 目的 就 是 希望 用 户 浏览 ， 让 更 多 的 用 户 浏览 网 站 ， 这 样 网 站 影响 力 就 会 越 大 。 如 
果 用 户 希望 听 到 优美 的 音乐 ， 那 么 就 在 网 页 上 添加 合适 的 背景 音乐 。 一 个 好 站 点 的 定义 是 : 通过 
典雅 的 风格 设计 提供 给 潜在 用 户 高 质量 的 信息 。 

4. 清晰 的 导航 

对 一 个 好 的 网 站 来 说 ， 清 晰 的 导航 也 是 最 基本 的 标准 。 应 该 让 访问 者 知道 在 网 站 中 的 位 置 
并 且 愉 快 地 通过 导航 的 指引 浏览 网 站 。 例 如 ， 可 以 做 到 的 一 件 事情 就 是 “下 一 步 ”的 选择 数目 尽 
量 少 ， 以 便 用 户 不 会 迷失 在 长 长 的 选择 项 目 列表 中 。 

5. 快捷 

让 用 户 在 获取 信息 时 不 要 超过 3 次 点 击 。 当 访问 者 在 访问 一 个 网 站 时 ， 如 果 点 击 了 七 八 次 才 
能 找到 想 要 的 信息 ， 或 者 还 没 找到 ， 他 肯定 会 离开 你 的 网 站 去 别 的 网 站 查找 了 ， 而 且 可 能 再 也 不 
会 来 你 的 网 站 了 。 访 问 者 进入 网 站 后 ， 他 应 该 可 以 不 费力 地 找到 所 需要 的 资料 。 

6. 30 秒 的 等 待 时 间 

有 一 条 不 成 文 的 法 则 : 当 访问 者 在 决定 下 一 步 应 该 去 哪里 之 前 ， 不 要 让 他 现在 所 处 页 面 的 下 
载 时 间 超 过 30 秒 钟 。 保 证 页 面 有 个 适度 的 大 小 ， 而 不 会 无 限制 的 下 载 。 


7. 平衡 

平衡 是 一 个 好 网 站 设计 的 重要 部 分 ， 如 文本 和 图 像 之 间 的 平衡 、 背 景 图 像 和 前 景 内 容 之 间 的 
平衡 。 

8. 测试 


一 定 要 在 多 种 浏览 器 、 多 种 分 辩 率 下 测试 每 个 网 页 。 现 在 Firefox 用 户 越 来 越 多 ， 至 少 要 在 
Firefox 和 Internet Explorer 下 都 测试 一 遍 。 


9. 学 习 

网 站 风格 、 页 面 设计 只 是 网 站 策划 的 一 小 部 分 内 容 ， 必 须 有 好 的 网 站 策划 思想 才能 策划 出 好 
的 页 面 ， 因 为 页 面 是 用 户 体验 的 一 个 重要 部 分 。 网 站 策划 与 设计 是 一 个 不 断 学 习 的 过 程 ， 技 术 和 
工具 在 不 断 进步 ， 现 在 又 流行 DIV+CSS 了 ， 网 民 的 上 网 习惯 及 方式 也 在 不 断 变化 ， 这 一 切 都 需 
要 我 们 不 断 学 习 、 不 断 进 步 。 
18.2.2 ”网 站 策划 的 关键 点 


网 站 策划 是 网 站 能 够 成 功 的 一 个 关键 因素 。 在 网 站 策划 中 ， 有 两 个 核心 关键 点 最 需要 注意 。 
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第 18 章 aa) 


1. 不 受 经 验 约束 


网 站 策划 没有 固定 的 模式 ， 重 要 的 是 符合 商业 的 战略 目标 。 很 多 策划 人 员 在 策划 会 员 管理 的 
注册 流程 时 ， 喜 欢 把 注册 流程 简化 ， 目 的 就 是 为 了 让 用 户 能 够 很 快 就 注册 完毕 。 但 是 ， 这 并 不 适 
合 所 有 网 站 。 成立 于 1999 年 的 Rent.com 是 美国 最 受 欢迎 的 公寓 租赁 网 站 ，2005 年 2 月 Rent.com 
被 eBay 以 4.33 亿美 元 现金 收购 。 后 来 有 人 总 结 它 成 功 的 一 个 重要 因素 ， 就 是 它 比 其 他 租赁 网 站 
有 着 更 为 繁复 的 用 户 注册 流程 ，Rent.com 在 用 户 注册 流程 上 收集 了 比 其 他 租赁 网 站 更 多 的 顾客 信 
息 。 这 样 做 的 好 处 是 ，Rent.com 的 用 户 成 交 率 大 大 提高 。 

当然 ， 并 不 是 说 所 有 网 站 都 应 该 这 样 做 ， 重 要 的 是 根据 每 个 网 站 的 经 营 目标 来 定 。 像 一 些 Web 
2.0 的 网 站 ， 并 不 需要 为 每 个 用 户 定制 服务 ， 也 就 没有 必要 去 搜集 那些 用 不 上 的 信息 。 而 Rentcom 
这 样 的 网 站 需要 通过 注册 搜索 到 用 户 的 很 多 信息 ， 这 些 信息 可 以 为 用 户 提 供 差异 化 的 服务 。 


2. 系统 思 


先 举 个 例子 ，1997 年 ， 世 界 卫 生 组 织 宣 布 要 在 非洲 消灭 症 疾 。 但 是 8 年 后 ， 非 洲 的 症 疾 发 病 
率 整 整 提高 了 几 倍 。 为 什么 初衷 很 好 ， 造 成 的 后 果 却 更 加 严重 呢 ? 原因 是 世界 卫生 组 织 在 制定 目 
标 之 后 ， 开 始 大 量 采 购 一 家 日 本 公司 的 药品 ， 使 当地 生产 症 疾 药物 的 厂商 倒闭 ， 进 而 导致 当地 一 
种 可 以 治疗 症 疾 的 植物 无 人 种 植 ， 结 果 预 防 症 疾 的 天 然 药 物 由 此 消失 。 管 理学 大 师 彼得 圣 吉 总 结 
认为 ， 造 成 这 个 结果 的 重要 原因 在 于 没有 系统 性 的 思考 ， 只 治标 不 治本 。 

对 于 互联 网 策划 而 言 ， 道 理 是 一 样 的 ， 系 统 思维 在 于 推出 功能 点 并 做 出 决策 时 ， 需 要 考虑 所 
有 的 因素 。 一 个 功能 可 能 从 一 个 方面 看 上 去 会 给 用 户 带 来 价值 , 但 是 从 另 一 个 角度 或 从 长 久 来 看 ， 
是 不 是 有 价值 ， 这 就 需要 找到 平衡 点 ， 进 而 找到 解决 问题 的 关键 。 


18.3 ”如 何 确定 网 站 的 定位 


建设 网 站 时 ， 首 先 要 解决 两 个 问题 : 一 是 网 站 有 没有 定位 ， 二 是 网 站 定位 是 不 是 合适 。 如 果 
不 能 够 用 一 句 话 来 概括 网 站 是 做 什么 的 ， 那 么 网 站 就 没有 清晰 的 定位 。 网 站 有 定位 也 不 一 定 是 对 
的 ， 定 位 于 一 个 竞争 激烈 的 市 场 或 者 已 经 饱和 的 市 场 ， 跟 没有 定位 是 没有 差别 的 。 所 以 ， 一 个 网 
站 不 仅 要 有 定位 ， 而 且 要 有 一 个 差异 化 的 定位 。 不 是 为 了 差异 化 而 差异 化 ， 而 是 为 了 目标 用 户 群 
的 需求 而 差异 化 ， 为 了 市 场 空间 的 不 同 而 差异 化 。 

有 清晰 而 合适 的 定位 ， 本 身 就 是 一 种 竞争 的 优势 ， 能 比 对 手 少 走 弯路 ， 以 更 少 的 资源 做 更 多 
的 事 ， 所 以 也 比 竞争 对 手 跑 得 更 快 ， 走 得 更 远 。 

在 网 站 发 展 的 初始 阶段 ， 网 站 的 目标 最 好 要 足够 小 ， 小 并 不 一 定 就 不 好 ， 大 并 不 一 定 就 好 。 
目标 很 高 还， 定位 很 宏大 ， 并 不 代表 网 站 就 能 达到 定位 希望 实现 的 目标 。 为 了 实现 大 目标 ， 最 好 
从 小 目标 开始 。 

定位 小 目标 ， 也 不 是 否定 将 来 的 大 目标 。 精 确 的 定位 反而 有 利于 网 站 的 进一步 发 展 ， 因 为 在 
不 同 的 发 展 阶段 定位 是 可 以 变化 的 。 如 美国 著名 的 社交 网 站 脸谱 网 Facebook， 原 来 是 为 美国 部 分 
著名 高 校 的 学 生 提供 服务 的 社区 , 而 后 来 则 向 社会 开放 。 如 果 一 开始 就 制定 一 个 面向 全 球 的 目标 ， 
很 难 想像 Facebook 能 够 流行 起 来 。 如 果 一 开始 定位 过 大 , 往往 造成 战线 过 长 、 资 源 及 精力 不 够 集 
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中 ， 最 后 很 难 形成 优势 。 

网 站 目标 定位 不 仅 要 小 ， 而 且 还 需要 找到 一 个 基点 ， 这 个 点 是 网 站 创立 、 发 展 、 壮 大 的 依靠 
点 ， 像 迅雷 以 下 载 为 基点 、 百 度 以 搜索 为 基点 等 。 刚 开始 时 ， 这 个 点 可 能 很 小 ， 但 是 网 站 发 展 壮 
大 之 后 ， 就 可 以 繁衍 出 无 数 的 应 用 。 如 果 开 始 时 基点 太 大 、 太 多 ， 什 么 都 想 做 ， 什 么 都 不 肯 放 弃 
最 后 的 结果 将 是 什么 都 得 不 到 。 

确定 网 站 的 定位 ， 就 要 找到 这 个 基点 ， 需 要 从 以 下 3 个 方面 考虑 : 第 一 要 有 良好 的 性 价 比 的 
市 场 空间 ; 第 二 网 站 定位 必须 考虑 用 户 的 新 需求 ， 第 三 相对 于 竞争 对 手 应 具有 独特 优势 。 


1. 网 站 定位 必须 考虑 市 场 前 景 ， 找 到 性 价 比 高 的 市 场 空间 


如 果 现 在 做 门户 网 站 ,也 许 投入 上 亿 元 , 都 不 能 保证 做 得 好 。 因 为 这 个 市 场 经 过 多 年 的 发 展 ， 
基本 格局 已 经 定 下 来 了 。 要 跻身 门户 的 行列 ， 需 要 花费 大 量 的 人 力 、 资 金 和 资源 ， 也 不 一 定 能 建 
立 起 来 。 用 户 的 习惯 、 门 户 本 身 的 优势 都 不 是 一 天 建立 起 来 的 ， 这 都 是 长 期 积累 的 结果 。 

确定 网 站 的 定位 ， 要 找到 性 价 比 高 的 市 场 。 什 么 是 性 价 比 高 的 市 场 ? 我 们 从 用 户 的 需求 考虑 
这 个 问题 ， 当 初 hao123 的 网 址 导航 网 站 是 性 价 比 高 的 典型 例子 。 


2. 网 站 定位 必须 考虑 用 户 的 新 需求 

用 户 的 需求 分 为 已 满足 的 需求 和 尚未 满足 的 需求 。 进 入 已 充分 满足 需求 的 领域 ， 成 本 将 会 非 
常 高 ; 如 果 能 找到 用 户 未 被 满足 的 需求 ， 进 入 成 本 就 会 大 大 降低 ， 而 网 站 成 功 的 可 能 性 也 会 增 大 。 
如 率先 进入 了 某 些 行业 的 网 络 B2C 直销 服务 。 


3. 网 站 定位 必须 考虑 竞争 对 手 ， 找 到 独特 的 竞争 优势 


网 站 要 有 独特 的 优势 ， 如 当初 的 Google 搜索 引擎 ， 这 是 竞争 对 手 一 时 难以 企及 的 。 拥 有 了 
这 些 独特 的 竞争 优势 ， 网 站 也 会 迅速 成 长 起 来 。 

前 面 的 几 点 可 以 总 结 为 一 点 ， 那 就 是 用 户 价值 。 能 够 提供 给 用 户 价值 的 网 站 最 终 都 能 实现 商 
业 价值 的 转化 。 最 后 ， 在 确定 网 站 定位 之 前 ， 可 以 反思 一 下 : 如 果 网 站 这 样 定位 能 给 用 户 提供 什 
么 样 的 价值 ? 这 个 价值 是 不 是 用 户 需 要 的 ? 如 果 需 要 ， 有 多 少 用 户 需 要 它 ? 用 户 是 不 是 愿意 为 它 
付 钱 ? 这样 的 价值 是 不 是 其 他 网 站 已 经 提供 ? 这 样 的 价值 是 不 是 其 他 网 站 也 很 容易 提供 ? 


18.4 ”确定 网 站 的 目标 用 户 


当中 、 小 型 企业 投资 建立 企业 网 站 后 ,， 有 很 多 的 中 、 小 型 企业 每 天 都 在 关注 企业 网 站 的 流量 。 
想 知道 每 天 能 有 和 多少 人 在 查询 网 站 内 容 ， 以 此 来 推断 企业 网 站 的 作用 ， 流 量 越 多 则 说 明成 交 的 机 
会 越 多 ， 也 有 部 分 的 中 、 小 型 企业 更 注重 通过 网 站 来 得 到 目标 用 户 。 得 到 更 多 的 目标 用 户 ， 就 说 
明 增加 了 生意 的 成 交 概率 。 不 过 ， 到 底 是 流量 重要 还 是 用 户 重要 呢 ? 

很 多 网 站 经 营 者 不 知道 网 站 的 目标 用 户 群 在 哪里 ， 更 不 用 说 了 解 网 站 的 目标 群 了 。 而 这 又 恰 
恰 是 一 个 决定 网 站 质量 的 直接 因素 。 不 要 只 是 盲目 地 做 网 站 ， 要 花 点 时 间 弄 清楚 网 站 的 目标 用 户 
群 ， 进 一 步 了 解 他 们 ， 让 网 站 发 挥 更 大 的 作用 。 
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选择 好 目标 用 户 ， 做 起 网 站 来 也 就 更 明确 了 。 了 解 用 户 需要 什么 ， 才 能 更 好 地 为 用 户 服务 。 
只 有 针对 目标 用 户 ， 网 站 的 作用 才能 得 到 更 好 地 发 挥 。 如 果 只 是 为 了 流量 而 大 大 投入 ， 那 就 太 不 
值得 了 。 试 想 如 果 浏 览 者 不 是 目标 用 户 ， 网 站 没有 他 想 要 的 东西 ， 他 再 次 来 的 机 会 就 很 渺茫 了 。 
这 样 的 点 击 可 谓 真正 的 “无 效 点 击 ” 而 我 们 要 的 是 有 效 点 击 ， 只 有 有 效 的 点 击 才 能 给 网 站 带 来 效 
益 。 网 站 必须 有 明确 的 目标 用 户 群 ， 才 能 充分 发 挥 网 站 的 作用 ， 实 现 效益 最 大 化 。 


18.5 ”网 站 的 内 容 策划 


网 站 的 内 容 策划 ， 就 是 策划 网 站 需要 什么 样 的 内 容 、 内 容 以 什么 样 的 方式 产生 、 以 什么 样 的 
方式 组 织 内 容 。 这 里 所 指 的 网 站 内 容 策划 包括 了 网 站 整体 架构 的 策划 ， 同 时 也 包括 具体 栏目 、 版 
块 、 功 能 的 策划 ， 产 品 和 服务 的 详细 功能 、 规 则 以 及 流程 也 属于 网 站 的 内 容 策 划 。 


18.5.1 网 站 内 容 策划 的 重要 性 


首先 一 个 成 功 的 网 站 一 定 要 注重 外 观 布局 。 外 观 是 给 用 户 的 第 一 印象 ， 给 浏览 者 留 下 一 个 好 
的 印象 ， 那 么 他 看 下 去 或 再 次 光顾 的 可 能 性 才 会 更 大 。 但 是 一 个 网 站 要 想 留 住 更 多 的 用 户 ， 最 重 
要 的 还 是 网 站 的 内 容 。 网 站 内 容 是 一 个 网 站 的 灵 瑰 ， 内 容 做 得 好 、 做 到 有 自己 的 特色 ， 才 会 脱 颖 
而 出 。 做 内 容 一 定 要 做 出 自己 的 特点 。 当 然 ， 有 一 点 需要 注意 的 是 ， 不 要 为 了 差异 化 而 差异 化 ， 
只 有 满足 用 户 核心 需求 的 差异 化 才 是 有 效 的 ， 和 否则 跟 模仿 其 他 网 站 功能 没有 实质 的 区 别 。 

一 般 的 网 站 都 讲究 实用 ， 有 用 才 是 最 重要 的 。 如 hao123 这 个 网 站 ， 既 没 艺术 ， 又 没 技术 ， 
为 什么 这 个 网 站 能 够 成 功 呢 ? 一 个 很 重要 的 原因 就 是 实用 。 中 国 网 民 上 网 ， 一 般 不 愿意 甚至 不 会 
输入 元 长 的 难 记 的 网 址 ， 所 以 hao123 这 个 网 址 导航 网 站 很 实用 。 

形式 美 只 会 给 浏览 者 留 下 一 个 好 的 印象 ， 好 的 印象 固然 可 以 让 浏览 者 进一步 浏览 网 站 。 如 果 
从 网 站 上 看 到 的 都 是 些 垃圾 信息 ， 没 有 浏览 者 需要 的 实用 信息 ， 那 么 浏览 者 估计 很 快 就 会 离开 。 


18.5.2 如何 做 好 网 站 内 容 策划 


网 站 的 内 容 是 浏览 者 停留 时 间 的 决定 要 素 ， 内 容 空 泛 的 网 站 ， 访 客 会 匆匆 离 去 。 只 有 内 容 充 
实 丰 富 的 网 站 ， 才 能 吸引 访客 细 细 阅读 ， 深 入 了 解 网 站 的 产品 和 服务 ， 进 而 产生 合作 的 意向 。 

每 个 用 户 都 有 其 理性 需求 与 感性 需求 ， 网 站 内 容 要 想 打 动 浏览 者 ， 归 根 结 底 无 非 是 8 个 字 
晓 之 以 理 ， 动 之 以 情 。 

1. 晓 之 以 理 

晓 之 以 理 ， 即 以 理性 的 语言 向 客户 透彻 介绍 产品 与 服务 ， 并 清晰 地 指出 企业 的 优势 所 在 ， 让 
客户 可 以 明确 地 进行 选择 。 然 而 ,“ 理 性 ”不 等 于 枯燥 ， 要 让 客户 信服 ， 采 用 以 下 方法 ， 可 以 更 好 
地 向 客户 讲 “ 理 ”。 

@ 图 片 说 话 : 俗话 说 一 图 胜 千 言 ， 与 其 大 篇 幅 地 介绍 公司 的 规模 、 架 构 、 企 业 文化 ， 不 如 采 
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用 图 片 来 与 客户 沟通 。 好 的 图 片 可 以 令 客户 更 真实 地 了 解 企 业 ， 并 产生 信赖 感 。 

@ 案例 佐证 过 于 夯 大 产品 优点 ， 有 “ 王 婆 卖 瓜 ”的 嫌疑 ， 采用 案例 就 可 信 得 多 了 ， 详 细 地 
介绍 重点 案例 ， 会 令 网 站 的 信任 指数 大 大 提升 。 

@ 突出 数字 和 图 表 : 浏览 者 在 网 站 上 停留 的 时 间 往 往 很 短 ， 突 出 数字 和 图 表 可 以 帮助 浏览 者 
在 短 时 间 内 了 解 网 站 的 实力 和 优势 ， 减 少 阅读 的 时 间 。 

2. 动 之 以 情 

动 之 以 情 ， 即 以 客户 喜爱 的 语言 和 内 容 来 打动 客户 ， 令 客户 停留 。 

@ 亲切 的 问候 与 提示 : 网 站 的 问候 与 提示 多 用 效 语 ， 如 “请 ” “您 "、“ 谢 谢 ”、 “对 不 起 ”等 ， 
令 客户 觉得 亲切 与 温馨 。 

@ 讲 故事 的 叙述 方式 : 试 着 采用 更 轻松 的 表达 方式 ， 无 论 是 介绍 公司 还 是 说 明 产品 ， 采 用 朋 
友 般 的 语气 跟 客 户 沟通 ， 让 客户 阅读 起 来 更 加 轻松 ， 也 更 容易 接受 。 

@ 给 予 用 户 足够 的 帮助 : 当 用 户 阅 读 网 站 内 容 时 ， 给 予 用 户 充分 的 提示 和 帮助 ， 如 产品 的 帮 
助 文档 、 操 作 步 骤 说 明 、 问 题解 答 等 ， 让 客户 感觉 如 同 有 一 位 热情 的 销售 人 员 在 为 其 提供 
服务 ， 从 而 倍 感 亲切 。 
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第 19 章 网 站 的 发 布 与 维护 


本 章 导 读 


网 站 系统 制作 完成 以 后 ， 并 不 能 直接 投入 运行 ， 而 必须 进行 全 面 、 完 整 的 测试 ， 包 括 本 地 
测试 、 网 络 测试 等 多 个 环节 。 测 试 完成 以 后 ， 设 计 开 发 人 员 必 须 为 网 站 系统 准备 或 申请 充足 的 
空间 资源 ， 以 便 网 站 系统 能 够 发 布 到 该 空间 中 去 进行 运作 。 而 且 ， 为 了 保证 Web 网 站 系统 的 正 
常 运行 和 有 效 工作 ， 发 布 以 后 的 维护 和 管理 工作 是 十 分 重要 的 。 


技术 要 点 


熟悉 站 点 的 测试 
掌握 网 页 的 上 传 
掌握 网 站 的 维护 
掌握 网 站 安全 维护 


19.1 ”站 点 的 测试 


在 真正 构建 远程 站 点 之 前 ， 应 该 在 本 地 先 对 站 点 进行 完整 的 测试 。 检 测 站 点 中 是 否 存在 错误 
和 断裂 的 链接 等 ， 以 找 出 其 他 可 能 存在 的 问题 。 


19.1.1 检查 链接 


如 果 网 页 中 存在 错误 链接 ， 这 种 情况 是 很 难 察觉 的 。 采 用 常规 的 方法 ， 只 有 打开 网 页 ， 单 击 
链接 时 ， 才 可 能 发 现 错误 。 而 Dreamweaver 可 以 帮助 用 户 快速 检查 站 点 中 网 页 的 链接 ， 避 免 出 现 
链接 错误 ， 具 体操 作 步 骤 如 下 。 


步骤 014 打开 已 创建 的 站 点 地 图 ， 选 中 一 个 文件 ， 执 行 “ 站 点 ”|“ 改 变 站 点 链接 范围 的 链接 ” 
命令 ， 弹 出 “更 改 整个 站 点 链接 ”对 话 框 ， 如 图 19-1 所 示 。 

步骤 024 在 “ 变 成 新 链接 ”文本 框 中 输入 链接 的 文件 ， 单 击 “确定 ”按钮 ， 弹 出 “更 新 文件 ” 
对 话 框 ， 单 击 “ 更 新 ”按钮 ， 完 成 更 改 整个 站 点 范围 内 的 链接 ， 如 图 19-2 所 示 。 
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更 改 整个 站 点 链接 (站 点 一 效果 ) 


更 改 所 有 的 链接 (H): 
Jindex,htm 


变 成 新 链接 (D): 
Nebiao,.asp 


图 19-1 “更 改 整 个 站 点 链接 ”对 话 框 图 19-2 “更 新 文件 ”对 话 框 


步骤 034 执行 “站 点 ”|“ 检 查 站 点 范围 的 链接 ” 命令， 打开 “链接 检查 器 ”面板 ， 在 “显示 ” 
选项 中 选择 “ 断 掉 的 链接 ”， 如 图 19-3 所 示 。 


证 接 检查 可 
_v | (本 和 文件 在 到 堵 礁 香 设 有 找 开 ) 


区 
-人 让 柯 f 声 了 I 引 HE 
-人 亿 丰 时 代 丧 了 FTygme 人 hnbnif 
[Jimageceemol je 从 志 时 人 广场 lec1tequotecjid 
其 光合 ，9 个 HINL，6 个 站 立 葡 件 ， 总 共 261 个 链 束 ，213 个 正确 ,8 个 断 迁 ，40 个 外 部 链接 


19-3 选择 “ 断 掉 的 链接 ” 


步骤 044 在 “显示 ”下 拉 列 表 中 选择 “外 部 链接 ”， 可 以 检查 出 与 外 部 网 站 链接 的 全 部 信息 ， 
如 图 19-4 所 示 。 


剑术 可 器 
ETIgETZRDIETT 二 
"EE 


| [Te Mapeo.am 

BE mer hen 
Endechen 
(Indexten 
(Endecten 
[ndechen 


六 拷 全 个， 9 个 HTM 6 个 而 立 文 促 。 总 并 201 个 居 按 ,213 个 正确; 0 


Mapilfnem 000.comyFo ep? deco 


ET 


图 19-4 选择 “外 部 链接 ” 
19.1.2 ”站 点 报告 


可 以 对 当前 文档 、 选 定 的 文件 或 整个 站 点 的 工作 流程 或 HTML 属性 〈 包 括 辅 助 功能 ) 运行 站 
点 报告 。 使 用 站 点 报告 可 以 检查 可 合并 的 嵌 套 字体 标签 、 辅 助 功能 、 遗 漏 的 替换 文本 、 宛 余 的 顽 
套 标 签 、 可 删除 的 空 标签 和 无 标题 文档 ， 具 体操 作 步 骤 如 下 。 


步 赃 014 执行 “站 点 ”|“ 报 告 ”命令 ， 弹 出 “报告 ”对 话 框 ， 在 对 话 框 中 的 “报告 在 ”下 拉 列 
表 中 选择 “整个 当前 本 地 站 点 ”选项 ，“ 选 择 报告 ”列表 框 中 色 选 “多 余 的 吝 套 标签 ”、 
“可 移 除 的 空 标签 ”和 “无 标题 文档 ” 复 选 框 ， 如 图 19-5 所 示 。 

步骤 024 单 击 “运行 ”按钮 ，Dreamweaver 会 对 整个 站 点 进行 检查 。 检 查 完毕 后 ， 将 会 自动 打开 
“站 点 报告 ”面板 ， 在 面板 中 显示 检查 结果 ， 如 图 19-6 所 示 。 
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档 使 用 默 从 标题 "无 未 有 文档 ” 

文档 使 用 默认 标题 "无 帮 题 六 档 ” 

文档 使 用 默认 标题 "无 帮 题 文档” 

可 移 除 的 空 
PE 


图 19-5 “报告 ”对 话 杠 图 19-6 “站 点 报告 ”面板 
19.1.3 清理 文档 


清理 文档 就 是 清理 一 些 空 标签 或 者 在 Word 中 编辑 时 所 产生 的 一 些 多 余 的 标签 ， 具 体操 作 步 

又 如 下 。 

步 又 014 打开 需要 清理 的 网 页 文档 .执行 “命令 |“ 清理 HTML” 命 令 , 弹出 “清理 HTML/XHTML” 
对 话 框 ， 在 对 话 框 中 “ 移 除 ”选项 中 色 选 “ 空 标签 区 块 ”和 “多 余 的 广大 ,标签 ” 复 选 
框 ， 或 者 在 “指定 的 标签 ”文本 框 中 输入 所 要 删除 的 标签 ， 并 在 “选项 ”中 色 选 “ 尽 
可 能 合并 度 套 的 <font> 标 签 ”和 “完成 时 显示 动作 记录 ” 复 选 框 ， 如 图 19-7 所 示 。 

步骤 024 单 击 “ 确 定 ”按钮 ，Dreamweaver 自动 开始 清理 工作 。 清 理 完毕 后 ， 弹 出 一 个 提示 框 ， 
在 提示 框 中 显示 清理 工作 的 结果 ， 如 图 19-8 所 示 。 
清理 HTML / XHTML 


8 口 [5 GD GD 
回 多 余 的 骨 大 标签 
口 不 展 于 Irewwesver 的 JINL 注解 Dreanweaver 加 | 


口 prewwesrer 特殊 标记 清理 总 结 : 


口 指定 的 标 和 
尽 可 能 合并 媒 大 的 “fnt》 标签 1 个 空 标签 已 山 除 
回 完 克 时 旺 示 动作 记录 


图 19-7 “清理 HTML/XHTML” 对 话 框 图 19-8 显示 清理 工作 的 结果 


步骤 034 执行 “命令 ”|“ 清 理 Word 生成 的 HTML” 命令， 弹出 “清理 Word 生成 的 HTML” 对 
话 框 ， 如 图 19-9 所 示 。 
步骤 044 在 对 话 框 中 切换 到 “详细 ”选项 卡 ， 勾 选 需 要 的 选项 ， 如 图 19-10 所 示 。 
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稍 理 Yord 生成 的 ETL 
清理 Word 生成 的 HTHL 
| 款 | Wa | 


| 


二 再 JIL 夏目 | 2000 及 更 后 直 国 
区 虹 辽 听 有 Niort 蛙 定 ?0 奈 记 

加 清理 [SS 

加 于 音 人 font> 本 等 

避 人 EE 无 次 遇 由 标签 

[3 


ne 


ss 的 只 式 二 客 
器 Ed cs HR 


19-9 “清理 Word 生成 的 HTML” 对 话 框 图 19-10 “详细 ”选项 卡 
步骤 054 单 击 “ 确 定 ” 按 钮 ， 清 理工 作 完成 后 显示 提示 框 ， 如 图 19-11 所 示 


Dreamaweaver 
清理 Yord 
下， 生生 本 
$ Yord_ XINL 已 册 除 
1 个 仅 为 文字 的 "mso" 样式 属 


性 
13 Bs 删除 或 转化 为 HTNL 


图 19-11 提示 框 


19.2 ”网 页 的 上 传 


当 网 站 制作 完成 以 后 ， 就 要 上 传 到 远程 服务 器 上 供用 户 浏览 ， 这 样 的 网 页 才 会 被 别人 看 到 。 


19.2.1 利用 Dreamweaver 上 传 网 页 


上 传 网 页 有 两 种 方法 , 一 种 是 用 Dreamweaver 自 带 的 工具 上 传 ， 另 一 种 是 FTP 软件 上 传 ， 下 
面 将 详细 讲述 使 用 Dreamweaver 上 传 方法 。 利 用 Dreamweaver 上 传 网 页 的 具体 操作 步骤 如 下 。 


步骤 01 执行 “站 点 ”|“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 如 图 19-12 所 示 


步骤 024 单 击 “ 编 辑 当前 选 定 的 站 点 ”按钮 ， 弹 出 “站 点 设置 对 象 ”对 话 框 ， 在 对 话 框 中 选择 
“服务 器 ”选项 ， 如 图 19-13 所 示 。 
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起 将 下 风 位 下 选择 节 未 Web 上 的 页 此 2 话 大 的 让 外 
| nernet 限 务 提供 商 0sP) 或 Web 


sn, mame yo fe 
A 


WE EE 


[ee 
Ee 
EDELT 


| 


图 19-12 “管理 站 点 ”对 话 框 图 19-13 “服务 器 ”选项 


步骤 034 在 对 话 框 中 单 击 “ 添 加 新 服务 器 ”按钮 ， 弹 出 远程 服务 器 设置 对 话 框 。 在 “连接 方法 ” 
下 拉 列 表 中 选择 FTP 选项 ; 在 “FTP 地 址 ”文本 框 中 输入 站 点 要 传 到 的 FTP 地 址 ; 在 
“用 户 名 ”文本 框 中 输入 拥有 的 FTP 服务 主机 的 用 户 名 ; 在 “密码 ”文本 框 中 输入 相应 
用 户 的 密码 ， 如 图 19-14 所 示 。 

步骤 044 设置 完 远程 信息 的 相关 参数 后 ， 单 击 “ 保 存 ” 按 钮 。 执 行 “ 窗 口 ”| “文件 ”命令 ， 打 
开 “ 文 件 ” 面 板 ， 在 面板 中 单 击 按钮 园 ， 如 图 19-15 所 示 。 


司 | 四 可 
HE 一 BO sametalient 2012--13 
服务 器 名 称 : [下 命 避 的 服务 本 了 田 Connections 文件 夹 。 2012-6-12 
Binsees 文件 买 。 2012-6-13 
殷 吉 :em 到 呈 denglu am SKB Active .. 2012-6-13 
FTP 地 址 ; 端口 ; [21 ali. asp 13KB Active,,, 2012-6-13 
index asp 21B Active .. 2012-6-13 
用 户 各 : index htnl 288 MTNL 文档 2012-6-13 
密码 | 口 保存 图 inaex. jpg 5621B JPEG 图 像 2012-6-7 1 
备 index vsa 1 Adobe ,,, 2012-6-7 1 
LE 入 winpsa 人， Adobe 2012-6-7 1 
” 本 shancha mp 8 Active,.. 2012-6-14 
shanchuok asp ZKB Active,.. 2012-6-14 
Web URL; [http:// 园 hop.ndb 216KB Micros,., 2010-5-11 
tfenlei. asp SKB Active .. 2012-6-13 
> 更 多 和 项 一 tfenleiok asp 2KB Active. .. 2012-6-13 
二 tshmain asp 8 hetive... 2012-6-13 辆 
2 
秆 助 全 | 取消 当日 期 : 2012-6-14 11:42 EEE 
图 19-14 远程 服务 器 设置 图 19-15 远程 信息 


步骤 054 弹出 如 图 19-16 所 示 的 界面 ， 在 界面 中 单 击 “ 连 接 到 远 端 主机 ”按钮 踊 ， 建 立 与 远程 
服务 器 连接 。 连 接 到 服务 器 后 ，“ 连 接 到 远 端 主机 ”按钮 融会 自动 变 为 闭合 中 状态 ， 
并 在 一 旁 亮 起 一 个 小 绿灯 ， 列 出 远 端 网 站 的 目录 ， 右 侧 窗口 显示 为 “本 地 文件 ”信息 。 


391 


( s IT 


[| 


图 19-16 ”建立 与 远程 服务 器 连接 
19.2.2 ”使 用 LeapFtp 软件 上 传 文件 

LeapFtp 是 一 款 功能 强大 的 FTP 软件 ， 具 有 友好 的 用 户 界面 ， 稳 定 的 传输 速度 ， 连 接 非常 方 
便 。 支 持 断 点 续 传 功能 ， 可 以 下 载 或 上 传 整个 目录 ， 也 可 直接 删除 整个 目录 。 具 体操 作 步 骤 如 下 。 


步 又 014 下 载 并 安装 最 新 LeapFtp 软件 ， 运 行 LeapFtp， 执 行 “站 点 ”|“ 站 点 管理 器 ”命令 ， 
如 图 19-17 所 示 。 
步骤 024 弹出 “站 点 管理 器 ”对 话 框 ， 执 行 


有 | 放 
刘 秃 。 到 


图 19-17 执行 “站 点 管理 器 ”命令 图 19-18 执行 “新 建站 点 ”命令 


步骤 034 在 弹出 的 窗口 中 输入 喜欢 的 站 点 名 称 ， 如 图 19-19 所 示 。 

步 野 044 单 击 “确定 ”按钮 后 ， 出 现 以 下 界面 。 在 “地 址 ” 栏 输 入 站 点 地 址 ， 将 “匿名 登录 ” 
前 的 对 勾 去 掉 ， 在 “用 户 名 ” 栏 输 入 FTP 用 户 名 ， 在 “密码 ” 栏 输入 FTP 密码 ， 如 图 
19-20 所 示 。 
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图 19-19 输入 站 点 名 称 图 19-20 输入 站 点 地 址 密码 


步骤 054 单 击 “连接 ”按钮 ， 直 接 进 入 连接 状态 ， 左 框 为 本 地 目录 ， 可 以 通过 下 拉 菜单 选择 要 
上 传 文件 的 目录 ， 选 择 要 上 传 的 文件 ， 并 单 击 鼠标 右键 在 弹出 快捷 菜单 中 选择 “上 传 ” 
命令 ， 如 图 19-21 所 示 。 

步骤 06M 这 时 在 队列 栏 里 会 显示 正在 上 传 及 未 上 传 的 文件 。 当 文件 上 传 完成 后 ， 在 右 侧 的 远程 

目录 栏 里 就 可 以 看 到 你 上 传 的 文件 了 ， 如 图 19-22 所 示 。 


I LooFTP 0.1 


图 19-21 选择 “上 传 ”命令 图 19-22 文件 上 传 成 功 


19.3 ”网 站 的 维护 


一 个 好 的 网 站 ， 仅 仅 一 次 是 不 可 能 制作 完美 的 。 由 于 市 场 在 不 断 地 变化 ， 网 站 的 内 容 也 需要 
随 之 调整 ， 给 人 常 新 的 感觉 ， 网 站 才 会 更 加 吸引 访问 者 ， 给 访问 者 很 好 的 印象 。 这 就 要 求 对 站 点 
进行 长 期 不 间断 的 维护 和 更 新 。 对 于 网 站 来 说 ， 只 有 不 断 地 更 新 内 容 ， 才 能 保证 网 站 的 生命 力 ， 
否则 网 站 不 仅 不 能 起 到 应 有 的 作用 ， 反 而 会 对 企业 自身 形象 造成 不 良 影响 。 


19.3.1 网 站 的 软 硬 件 维护 


计算 机 硬件 在 使 用 中 经 常会 出 现 一 些 问 题 ， 网 络 设备 也 同样 影响 企业 网 站 的 工作 效率 ， 网 络 
设备 管理 属于 技术 操作 ， 非 专业 人 员 的 误 操作 有 可 能 导致 整个 企业 网 站 瘫痪 。 
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没有 任何 操作 系统 是 绝对 安全 的 。 维 护 操作 系统 的 安全 必须 不 断 地 留意 相关 网 站 ， 及 时 为 系 
统 安装 升级 包 或 打上 补丁 。 其 他 的 如 SQL Server 等 服务 器 软件 也 要 及 时 打上 补丁 。 

服务 器 配置 本 身 就 是 安全 防护 的 重要 环节 ， 有 不 少 黑客 就 是 利用 IIS 服务 器 的 漏洞 来 攻击 网 
站 的 。 一 般 的 服务 器 系统 本 身 已 经 提供 了 复杂 的 安全 策略 措施 。 充 分 利用 这 些 安全 策略 ， 可 以 大 
大 降低 系统 被 攻击 的 可 能 性 和 伤害 程度 。 


19.3.2 ”网 站 内 容 维护 


对 于 网 站 来 说 ， 只 有 不 断 地 更 新 内 容 ， 才 能 保证 网 站 的 生命 力 ， 和 否则 网 站 不 仅 不 能 起 到 应 有 
的 作用 ， 反 而 会 对 企业 自身 形象 造成 不 良 影响 。 如 何 快 捷 方 便 地 更 新 网 页 ， 提 高 更 新 效率 ， 是 很 
多 网 站 面临 的 难题 。 现 在 网 页 制作 工具 不 少 ， 但 为 了 更 新 信息 而 日 复 一 日 地 编辑 网 页 ， 对 网 站 维 
护 人 员 来 说 ， 疲 于 应 付 是 普遍 存在 的 问题 。 

内 容 更 新 是 网 站 维护 过 程 中 的 重要 一 环 。 可 以 考虑 从 以 下 5 个 方面 入 手 ， 使 网 站 能 长 期 顺利 

@ 第 一 ， 在 网 站 建设 初期 ， 就 要 对 后 续 维 护 给 予 足够 的 重视 ， 要 保证 网 站 后 续 维 护 所 需 资金 
和 人 力 。 很 多 网 站 建设 时 很 舍得 投入 资金 。 可 是 网 站 发 布 后 ， 维 护 力度 不 够 ， 信 息 更 新 工 
作 迟 迟 跟 不 上 。 网 站 建成 之 时 ， 就 是 网 站 死亡 的 开始 。 

@ 第 二 ， 要 从 管理 制度 上 保证 信息 渠道 的 通畅 和 信息 发 布 流程 的 合理 性 。 网 站 上 各 栏目 的 信 
息 往 往来 源 于 多 个 业务 部 门 ， 要 进行 统筹 考虑 ， 确 立 一 套 从 信息 收集 、 信 息 审 查 到 信息 发 
布 的 良性 运转 的 管理 制度 。 既 要 考虑 信息 的 准确 性 和 安全 性 , 又 要 保证 信息 更 新 的 及 时 性 。 
要 解决 好 这 个 问题 ， 领 导 的 重视 是 前 提 。 

@ 第 三 ， 在 建设 过 程 中 要 对 网 站 的 各 个 栏目 和 子 栏目 进行 尽量 细致 的 规划 ， 在 此 基础 上 确定 
哪些 是 经 常 要 更 新 的 内 容 ， 哪 些 是 相对 稳定 的 内 容 。 根 据 相 对 稳定 的 内 容 设计 网 页 模板 ， 
在 以 后 的 维护 工作 中 ， 这 些 模板 不 用 改动 ， 这 样 既 省 费用 ， 又 有 利于 后 续 维护 。 

@ 第 四 ， 对 经 常 变更 的 信息 ， 尽 量 建 立 数据 库 管理 ， 以 避免 数据 杂乱 无 章 的 现象 。 如 果 采 用 
基于 数据 库 的 动态 网 页 方案 ， 则 在 网 站 开发 过 程 中 ， 不 但 要 保证 信息 浏览 的 方便 性 ， 还 要 
保证 信息 维护 的 方便 性 。 

@ 第 五 ， 要 选择 合适 的 网 页 更 新 工具 。 信 息 收 集 起 来 后 ， 如 何 制作 网 页 ， 采 用 不 同 的 方法 ， 
效率 也 会 大 大 不 同 。 例 如 , 使 用 Notepad 直接 编辑 HTML 文档 与 用 Dreamweaver 等 可 视 化 
工具 相 比 ， 后 者 的 效率 自然 高 得 多 。 若 既 想 把 信息 放 到 网 页 上 ， 又 想 把 信息 保存 起 来 以 备 
今后 再 用 ， 那 么 采用 能 够 把 网 页 更 新 和 数据 库 管理 结合 起 来 的 工具 效率 会 更 高 。 


19.3.3 ”网 站 备份 
作为 一 个 网 站 的 拥有 着 和 管理 者 ， 网 站 是 我 们 最 大 的 财富 。 在 面 对 错综复杂 的 网 络 环境 时 ， 
必须 保证 网 站 的 正常 运作 , 但 很 多 的 情况 是 我 们 无 法 掌控 和 预测 的 ， 如 黑客 的 入 侵 、 硬件 的 损坏 、 


人 为 的 误 操 作 等 ， 都 可 能 对 网 站 产生 毁灭 性 的 打击 。 所 以 ， 我 们 应 该 定期 备份 网 站 数据 ， 在 遇 到 
上 述 意外 时 能 将 损失 降低 到 最 小 。 网 站 备份 并 不 复杂 ， 可 以 通过 网 站 系统 自 带 的 一 些 备份 功 能 轻 
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松 实现 备份 ， 最 重要 的 就 是 建立 起 网 站 备份 的 观念 和 习惯 。 

1. 网 站 文件 备份 

对 于 网 站 文件 的 备份 ， 或 者 说 整 站 目录 的 备份 。 一 般 网 站 文件 有 变动 的 情况 下 ， 肯 定 是 要 备 
份 一 次 的 ， 如 网 站 模板 的 变更 、 网 站 功能 的 增删 ， 这 类 备份 的 目的 主要 是 担心 网 站 文件 的 变动 引 
起 整 站 的 不 稳定 或 造成 网 站 其 他 功能 和 文件 的 丢失 。 一 般 来 说 ， 由 于 文件 的 变动 频率 较 小 ， 备 份 
的 周期 相对 较 长 ， 可 以 在 每 次 变动 网 站 相关 文件 前 ， 进 行 网 站 文件 的 备份 。 对 于 网 站 文件 或 者 说 
整 站 目录 的 备份 ， 一 般 可 以 通过 远程 目录 打包 的 方式 ， 将 整 站 目录 打包 并 且 下 载 到 本 地 ， 这 种 方 
式 是 最 简便 的 。 而 对 于 一 些 大 型 网 站 ， 网 站 目录 包含 大 量 的 静态 页 面 、 图 片 和 其 他 的 一 些 应 用 程 
序 ， 可 以 通过 FTP 数据 备份 工具 ， 将 网 站 目录 下 的 相关 文件 直接 下 载 本 地 ， 根 据 备 份 时 间 在 本 地 
实现 定期 打包 和 蔡 换 。 这 样 可 以 最 大 限度 地 保证 网 站 的 安全 性 和 完整 性 。 

2. 数据 库 的 备份 

数据 库 对 于 一 个 网 站 来 说 ， 其 重要 性 不 言 而 喻 。 网 站 文件 损坏 ， 可 以 通过 一 些 技 术 还 原 手段 
可 以 实现 ， 如 模板 文件 丢失 ， 我 们 换 一 套 模 板 ， 网 站 文件 丢失 ,我 们 可 以 再 重新 安装 一 次 网 站 程 
序 ， 但 如 果 数 据 库 丢 失 ， 相 信 技 术 再 强 的 站 长 也 是 无 力 回 天 。 相 对 于 网 站 数据 库 而 言 ， 变 动 的 频 
率 就 很 大 了 ， 相 对 来 说 备份 的 频率 相对 来 说 会 更 频繁 一 些 。 一 般 一 些 服务 较 好 的 IDC， 通 常 是 每 
周 帮 忙 备份 一 次 数据 库 。 对 于 一 些 运 用 建站 CMS 做 网 站 的 站 长 来 说 ， 在 后 台 都 有 非常 方便 的 数 
据 库 一 键 备份 ， 通 过 自动 备份 到 指定 的 网 站 文件 夹 中 。 如 果 你 还 不 放心 ， 可 以 使 用 FTP 工具， 将 
远程 的 备份 数据 库 下 载 到 本 地 ， 真 正 实现 数据 库 的 本 地 、 异 地 双 备份 。 


19.4 ”网 站 安全 维护 


随 着 网 络 破坏 行为 的 日 益 猩 狂 ， 人 们 开始 重视 网 络 的 安全 问题 。 目 前 网 站 建设 已 经 不 仅仅 考 
虑 具体 功能 模块 的 设计 ， 而 是 将 技术 的 实现 与 网 络 安全 结合 起 来 。 


19.4.1 目录 和 应 用 程序 访问 权限 的 设置 


目录 和 应 用 程序 访问 权限 是 由 IIS 服务 器 的 权限 设置 的 ， 它 与 上 节 讨论 的 NTFS 权限 是 互相 
独立 的 ， 并 共同 限制 用 户 对 站 点 资源 的 访问 。 目 录 和 应 用 程序 的 访问 权限 并 不 能 对 用 户 身 份 进行 
识别 ， 因 此 它 所 做 出 的 限制 是 一 般 性 的 ， 对 所 有 的 访问 者 都 起 作用 。 

指定 目录 和 应 用 程序 访问 权限 是 在 网 站 “属性 ”窗口 的 “ 主 目录 ”选项 卡 中 进行 的 ， 其 设置 
界面 如 图 19-23 和 图 19-24 所 示 。 
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图 19-23 “Internet 信息 服务 ”窗口 19-24 “默认 网 站 属性 ”对 话 框 
女 提示 女 
目录 和 应 用 程序 访问 权限 分 别 对 网 站 中 的 目录 以 及 应 用 程序 文件 进行 权限 的 限制 。 其 中 , 前 者 针对 非 
应 用 程序 文件 ， 包 括 网 页 、 所 有 数据 库 文件 等 ， 其 权限 类 型 主要 有 “ 读 取 ”和 “ 写 入 ”。 后 者 则 是 针 
对 使 用 脚本 语言 编写 的 脚本 程序 文件 和 可 执行 应 用 程序 文件 ， 其 权限 有 “无 权限 ”、“ 纯 脚本 ”、“ 肢 本 
和 可 执行 程序 ”3 种 类 型 。 

“ 主 目录 ”选项 卡 中 部 的 “ 读 取 ”和 “ 写 入 ” 复 选 框 用 于 配制 目录 访问 权限 。 一 般 意义 上 的 
网 页 浏览 和 文件 下 载 操作 在 “ 读 取 ” 权 限 的 许可 下 就 可 以 进行 了 。 对 于 允许 用 户 添加 内 容 的 网 站 

(例如 搜集 用 户 信 息 的 网 站 或 专门 的 个 人 主页 空间 )， 就 要 考虑 指定 “ 写 入 ”权限 。 


19.4.2 ”匿名 和 授权 访问 控制 
在 默认 情况 下 ，IIS 对 任意 站 点 都 是 允许 匿名 访问 的 。 如 果 出 于 站 点 安全 性 等 考虑 需要 禁止 
匿名 访问 时 ， 则 应 按照 如 下 步 又 进行 配置 。 


步骤 014 在 IIS 中 单 击 鼠 标 右键 管理 控制 树 中 需要 禁止 匿名 访问 的 Web 站 点 图 标 ， 选择“ 属性 ” 
命令 ， 弹 出 “默认 网 站 属性 ”对 话 框 ， 如 图 19-25 所 示 。 


Toternet 信息 服 和 
文件 吕 按 作 抽查 理 和 MOD 


19-25 选择 “属性 ”命令 
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步骤 024 在 “目录 安全 性 ”选项 卡 上 部 的 “匿名 访问 和 身份 验证 控制 ” 栏 中 单 击 “ 编 辑 ” 按 钮 , 
如 图 19-26 所 示 。 
步 又 034 在 “身份 验证 方法 ”对 话 框 中 清除 “匿名 访问 ” 复 选 框 ， 如 图 19-27 所 示 。 单 击 “ 确 定 ” 


按钮 返回 。 
默认 网 站 属性 回回 
[mm 类 自 证 久 错 训 MFM | 
| 网 站 ISAPI 丽 过 器 三 B 录 和 目录 安生 性 


医 名 访问 和 身份 验证 控制 
区 这 内 本 及 要 外 身价 驻 下 放 


芋 地 址 和 城 名 限制 


包 


安全 通信 


| 


用 户 访问 需 经 过 身份 验证 


om ,要 求 用 户 名 和 密码 

-信用 TPS 沪 同和 制 了 访问 权限 
有 范 姑 6 摘要 1 

口 基本 身份 对 证 以 明文 形式 发 送 密码 ) G) 

默 让 域 中 ) 

领域 

加 玉成 Windows 身份 验证 0D) 


确定 [CRW ] 


CJ CD 珊 二 


19-26 “目录 安全 性 ”选项 卡 图 19-27 清除 “匿名 访问 ” 复 选 框 
当然 ， 对 于 公共 性 质 的 网 站 而 言 ， 并 不 需要 禁止 匿名 访问 ， 但 在 某 些 情况 下 还 需要 对 匿名 访 
问 用 户 账 号 进行 配置 。 在 “身份 验证 方法 ”对 话 框 中 选择 “匿名 访问 ” 复 选 框 ， 然 后 单 击 右 侧 的 
“浏览 ”按钮 ， 打 开 “ 选 择 用 户 ” 配 置 对话 框 ， 加 入 指定 的 用 户 或 用 户 组 。 


19.4.3 ”隐藏 IP 地 址 


黑客 经 常 利用 一 些 网 络 探测 技术 来 查看 主机 信息 ， 主 要 目的 就 是 得 到 网 络 中 主机 的 IP 地 址 。 
IP 地 址 在 网 络 安全 上 是 一 个 很 重要 的 概念 ， 如 果 攻 击 者 知道 了 服务 器 的 IP 地 址 ， 等 于 为 攻击 准 
备 好 了 目标 ， 黑 客 可 以 向 这 个 中 发 动 各 种 进攻 ， 如 DoS 《拒绝 服务 ) 攻击 、Floop 溢出 攻击 等 。 
隐藏 瑟 地 址 的 主要 方法 是 使 用 代理 服务 器 。 与 直接 连接 到 互联 网 相 比 , 使 用 代理 服务 器 能 够 保护 
上 网 用 户 的 IP 地 址 ， 从 而 保障 上 网 安全 。 

下 面 介 绍 如 何 通 过 Intemet Explorer 浏览 器 来 设置 代理 服务 器 , 进而 实现 隐藏 了 地址 的 目的 ， 
具体 操作 步骤 如 下 。 


步骤 01 启动 Internet Explorer 浏览 器 ， 执 行 “ 工 具 ”|“Internet 选项 ”命令 ， 打 开 “Internet 选 
项 ”对 话 框 ， 单 击 “ 连 接 ” 选 项 卡 ， 如 图 19-28 所 示 。 

步骤 024 单 击 “局 域 网 设置 ” 按钮， 打开“ 局 域 网 (LAN ) 设置 ”对 话 框 ， 选 择 “ 为 LAN 使 用 
代理 服务 器 ”项 ， 激 活 下 面 的 “地 址 ”设置 栏 ， 输 入 代理 服务 器 的 IP 地 址 ， 并 设置 具 
体 的 端口 号 ， 最 后 单 击 “ 确 定 ”按钮 ， 完 成 代理 服务 器 的 设置 ， 如 图 19-29 所 示 。 
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EE 
[CJ 
19-28 “Intemet 选项 ”对 话 框 19-29 ”设置 代理 服务 器 


19.4.4 ”操作 系统 账号 管理 


Administrator 账号 拥有 最 高 的 系统 权限 ， 一 旦 该 账号 被 人 利用 ， 后 果 将 不 堪 设 想 。 黑 客 入 侵 
的 常用 手段 之 一 就 是 试图 获得 Administrator 账号 的 密码 ， 在 一 般 情况 下 ， 系 统 安装 完毕 后 ， 
Administrator 账号 的 密码 为 空 ， 因 此 要 重新 配置 Administrator 账号 。 

首先 是 为 Administrator 账号 设置 一 个 强大 复杂 的 密码 ， 然 后 重 命名 Administrator 账号 ， 再 创 
建 一 个 没有 管理 员 权限 的 Administrator 账号 欺骗 入 侵 者 。 这 样 一 来 ， 入 侵 者 就 很 难 搞 清 哪个 账号 
真正 拥有 管理 员 权限 ， 也 就 在 一 定 程度 上 降低 了 危险 性 。 下 面 介 绍 通过 控制 面板 为 Administrator 
账号 创建 一 个 密码 的 具体 步骤 。 

步骤 014 执行 “控制 面板 ” |“ 管理 工具 ”|“ 计 算 机 管理 ”命令 ， 在 窗口 中 选择 “系统 工具 /本 地 
用 户 和 组 /用 户 ”， 接 下 来 在 右 侧 的 用 户 列表 窗口 中 ， 选 中 Administrator 账号 并 单 击 鼠 
标 右 键 ， 在 弹出 的 快捷 菜单 中 选择 “设置 密码 ”命令 ， 如 图 19-30 所 示 。 

步骤 024 此 时 将 弹出 设置 账号 密码 的 警告 提示 窗口 ， 如 图 19-31 所 示 。 
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有 关 更 多 信息 ,语音 击 “ 帮 助 " 


CE Cm Ci 


图 19-30 选择 “设置 密码 ”命令 图 19-31 警告 提示 窗口 
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步骤 034 单 击 “ 继 续 ”按钮 ， 将 弹出 “为 Administrator 设置 密码 ”对 话 框 ， 如 图 19-32 所 示 ， 这 
里 连续 两 次 输入 相同 的 登录 密码 。 最 后 单 击 “ 确 定 ”按钮 ， 完 成 账户 密码 的 设置 。 

步 野 044 在 用 户 列表 窗口 中 ， 选 中 “Administrator” 账 号 ， 并 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 
中 选择 “ 重 命名 ”命令 ， 如 图 19-33 所 示 ， 可 以 根据 自己 的 需要 为 其 重 命名 。 


加 立 补 中 捧 作 怠 ) 查看 WW。 全 口 各 大助 人 
+ 四国 | x 社民 国 


所 有 在 各 四。 直 息 服务 印 | 
为 Adainistrator 设置 宪 码 > Pe 


复 码 B 名 的 提供 | 

畏 这 密码 四 eg 

人 和 0 果 达 昌 直 “机 定 ,村 六 主 J0 下 车 克 
aa 


。 所 有 此 用 户 他 时 的 守 码 重 设 盘 稳 直 再 起 作用 。 


如 果 作 单 击 “取消 ”， 宪 码 构 丰 会议 更 改 ， 并且 构 焉 会 委 失 数据 。 


19-32 “为 Administrator 设置 密码 ”对 话 框 图 19-33 选择 “ 重 命名 ”命令 
19.4.5 ”安装 必要 的 安全 软件 


除了 通过 各 种 手动 方式 来 保护 服务 器 操作 系统 外 ， 还 应 在 计算 机 中 安装 并 使 用 必要 的 防 黑 软 
件 、 杀 毒 软件 和 防火 墙 。 在 上 网 时 打开 它们 ， 这 样 即便 有 黑客 进攻 服务 器 ， 系 统 的 安全 也 是 有 保 
证 的 。 

木马 程序 会 窃取 所 植 入 电脑 中 的 有 用 信息 ， 因 此 也 要 防止 被 黑客 植 入 木马 程序 。 在 下 载 文件 
时 先 放 到 自己 新 建 的 文件 夹 里 ， 再 用 杀毒 软件 来 检测 ， 起 到 提前 预防 的 作用 。 
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第 20 章 ”网 站 的 宣传 推广 


本 章 导读 


网 站 推广 就 是 以 互联 网 为 基础 , 利用 数字 化 的 信息 和 网 络 媒体 的 交互 性 来 辅助 营销 目标 实 
现 的 一 种 新 型 的 市 场 营销 方式 。 本 章 将 介绍 一 些 网 站 宣传 推广 的 方法 ， 如 注册 到 搜索 引擎 、 导 
航 网 站 登录 、 友 情 链 接 和 网 络 广告 等 。 


技术 要 点 


注册 到 搜索 引擎 
导航 网 站 登录 
友情 链接 
网 络 广告 
发 布 信息 推广 
传统 媒体 广告 
电子 邮件 


20.1 注册 到 搜索 引擎 


搜索 引擎 注册 是 最 经 典 、 最 常用 的 网 站 推广 手段 方式 。 当 一 个 网 站 发 布 到 互联 网 上 之 后 ， 如 
果 和 希望 别人 通过 搜索 引擎 找到 你 的 网 站 ， 就 需要 进行 搜索 引擎 注册 。 


20.1.1 搜索 引擎 


据 统计 ， 信 息 搜索 已 成 为 互联 网 最 重要 的 应 用 。 随 着 技术 的 进步 ， 搜 索 效率 不 断 提高 ， 用 户 
在 查询 资料 时 不 仅 越 来 越 依赖 于 搜索 引擎 ， 而 且 对 搜索 引擎 的 信任 度 也 日 渐 提高 。 有 了 如 此 雄厚 
的 用 户 基础 ， 利 用 搜索 引擎 宣传 企业 形象 和 产品 服务 当然 能 获得 极 好 的 效果 。 

在 搜索 引擎 中 检索 信息 都 是 通过 输入 关键 字 来 实现 的 。 因 此 ， 在 登录 搜索 引擎 时 一 定 要 填写 
好 关键 字 。 那 么 如 何 才 能 找到 最 适合 你 的 关键 字 呢 ? 

首先 ， 要 仔细 揣摩 潜在 客户 的 心理 ， 绞 尽 脑汁 设想 他 们 在 查询 与 网 站 有 关 的 信息 时 最 可 能 使 
用 的 关键 字 ， 并 一 一 将 这 些 词 记 下 来 。 不 必 担 心 列 出 的 关键 字 会 太 多 ， 相 反 找 到 的 关键 字 越 多 ， 
履 盖 面 也 越 大 ， 也 就 越 有 可 能 从 中 选 出 最 佳 的 关键 字 。 

搜索 引擎 上 的 信息 针对 性 都 很 强 。 用 搜索 引擎 查找 资料 的 人 都 是 对 某 一 特定 领域 感 兴趣 的 群 
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体 ， 所 以 愿意 花费 精力 找到 网 站 的 人 ， 往 往 很 有 可 能 就 是 渴望 已 久 的 客户 。 而 且 不 用 强迫 别人 接 
受 提出 要 求 的 信息 ， 相 反 ， 如 果 客户 确实 有 某 方面 的 需求 ， 他 就 会 主动 找 上 门 来 。 

如 图 20-1 所 示 在 百度 搜索 引擎 登录 网 站 。 注册 时 尽量 详尽 地 填写 企业 网 站 中 的 信息 , 特别 是 
关键 字 ， 尽 量 写 得 普遍 化 、 大 众 化 一 些 ， 如 “公司 资料 ”最 好 写成 “公司 简介 ”。 


再 达 近 索 贡 肥 中心 -了 


六 全国 
86， 
Bai 人 百度 mssz 


控 过 全 助 ” 百 康 扒 三” 加 站 县 录 百度 首页 


一 点 去 这 生 二 在 于 委 也 拓 南 


EL 


[ET 


图 20-1 在 百度 搜索 引擎 登录 网 站 
20.1.2 ”搜索 引擎 的 原理 


搜索 引擎 ， 通 常 指 的 是 收集 了 因特网 上 几 千 万 到 几 十 亿 个 网 页 并 对 网 页 中 的 每 一 个 词 〈 即 关 
键 字 ) 进行 索引 ， 建 立 索 引 数据 库 的 全 文 搜索 引擎 。 当 用 户 查 找 某 个 关键 字 的 时 候 ， 所 有 在 页 面 
内 容 中 包含 了 该 关键 字 的 网 页 都 将 作为 搜索 结果 被 搜 出 来 。 在 经 过 复杂 的 算法 进行 排序 后 ， 这 些 
结果 将 按照 与 搜索 关键 字 的 相关 度 高 低 ， 依 次 排列 。 根 据 自 己 的 优化 程度 ， 获 得 相应 的 名 次 。 如 
图 20-2 所 示 搜 索引 擎 工作 原理 。 

客户 端 浏览 器 | 


| 图 中 : 

! 一 > 表示 教 据 库 的 更 新 
! 一 表 示 检 索 的 查询 过 程 
;一介 表示 浏览 Web 页 面 


搜索 引擎 主机 


图 20-2 搜索 引擎 工作 原理 
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在 搜索 引擎 的 后 台 ， 有 一 些 用 于 搜集 网 页 信息 的 程序 。 所 收集 的 信息 一 般 是 能 表明 网 站 内 容 
(包括 网 页 本 身 、 网 页 的 URL 地 址 、 构 成 网 页 的 代码 以 及 进出 网 页 的 连接 ) 的 关键 字 或 者 短语 。 
接着 将 这 些 信息 的 索引 存放 到 数据 库 中 。 


20.1.3 ”搜索 引擎 分 类 


搜索 引擎 包括 全 文 索引 、 目 录 索 引 、 元 搜索 引擎 、 垂 直 搜索 引擎 、 集 合式 搜索 引擎 、 门 户 搜 
索引 擎 等 。 


1. 全 文 索引 


全 文 搜索 引擎 是 目前 广泛 应 用 的 主流 搜索 引擎 ， 国 外 代表 有 Google， 国 内 则 有 著名 的 百度 。 
它们 从 互联 网 提取 各 个 网 站 的 信息 ， 建 立 起 数据 库 ， 并 能 检索 与 用 户 查询 条 件 相 匹 配 的 记录 ， 按 
一 定 的 排列 顺序 返回 结果 。 

根据 搜索 结果 来 源 的 不 同 ， 全 文 搜索 引擎 可 分 为 两 类 ， 一 类 拥有 自己 的 检索 程序 ， 能 自 建 网 
页 数据 库 ， 搜 索 结果 直接 从 自身 的 数据 库 中 调用 ， 上 面 提 到 的 Google 和 百度 就 属于 此 类 ; 另 一 类 
则 是 租用 其 他 搜索 引擎 的 数据 库 ， 并 按 自 定 的 格式 排列 搜索 结果 。 

当 用 户 以 关键 字 查 找 信息 时 ， 搜 索引 擎 会 在 数据 库 中 进行 搜寻 。 如 果 找 到 与 用 户 要 求 内 容 相 
符 的 网 站 ， 便 采用 特殊 的 算法 ， 通 常 根据 网 页 中 关键 字 的 匹配 程度 、 出 现 的 位 置 、 频 次 、 链 接 质 
量 ， 计 算出 各 网 页 的 相关 度 及 排名 等 级 ， 然 后 根据 关联 度 高 低 ， 按 顺序 将 这 些 网 页 链接 返回 给 用 
户 。 这 种 引擎 的 特点 是 搜索 率 比较 高 。 

2. 目录 索引 

虽然 有 搜索 功能 ， 但 严格 意义 上 不 能 称 为 真正 的 搜索 引擎 ， 只 是 按 目录 分 类 的 网 站 链接 列表 
而 已 。 用 户 完全 可 以 按照 分 类 目录 找到 所 需要 的 信息 ， 不 依靠 关键 字 进 行 查 询 。 目 录 索 引 中 最 有 具 
代表 性 网 站 有 Yahoo、 新 浪 分 类 目录 搜索 。 

3. 元 搜索 引擎 

元 搜索 引擎 (Meta Search Engine) 接受 用 户 查询 请 求 后 ， 同 时 在 多 个 搜索 引擎 上 搜索 ， 并 将 
结果 返回 给 用 户 。 在 搜索 结果 排列 方面 ， 有 的 直接 按 来 源 排列 搜索 结果 ， 有 的 则 按 自 定 的 规则 将 
结果 重新 排列 组 合 。 

4. 垂直 搜索 引擎 

垂直 搜索 引擎 为 2006 年 后 逐步 兴起 的 一 类 搜索 引擎 。 不 同 于 通用 的 网 页 搜索 引擎 ， 垂 直 搜 
索 专注 于 特定 的 搜索 领域 和 搜索 需求 ， 在 其 特定 的 搜索 领域 有 更 好 的 用 户 体验 。 相 比 通 用 搜索 动 
辆 数 千 台 检 索 服务 器 ， 重 直 搜索 需要 的 硬件 成 本 低 、 用 户 需求 特定 、 查 询 的 方式 多 样 。 

5. 集合 式 搜 索引 擎 


合式 搜索 引擎 类 似 元 搜索 引擎 ， 区 别 在 于 它 并 非 同时 调用 多 个 搜索 引擎 进行 搜索 ， 而 是 由 
用 户 从 提供 的 若干 搜索 引擎 中 选择 。 
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6. 门户 搜索 引擎 


门户 搜索 引擎 : AOLSearch、MSNSearch 等 虽然 提供 搜索 服务 ， 但 自身 既 没有 分 类 目录 也 没 
有 网 页 数据 库 ， 其 搜索 结果 来 自 其 他 搜索 引擎 。 


20.1.4 搜索 引擎 注册 


一 般 到 搜索 引擎 注册 的 时 候 ， 除 了 关键 字 是 对 公司 网 站 具体 的 描述 以 外 ， 还 要 告诉 搜索 引擎 
公司 的 网 址 ， 也 就 是 URL， 一 般 在 注册 前 要 选择 最 能 表现 产品 或 者 服务 的 URL。 

目前 提交 URL 的 方法 大 概 有 两 种 ， 手 工 注册 和 软件 自动 注册 。 手 工 注册 需要 用 户 进入 不 同 
的 搜索 引擎 自己 进行 注册 。 这 种 注册 的 缺点 是 工作 量 比较 大 ， 而 且 还 要 辨认 那些 难 懂 的 英文 。 但 
是 它 的 效果 特别 好 ， 一 般 建 议 是 采用 手工 注册 的 办 法 。 软 件 自 动 搜索 是 利用 专门 的 注册 软件 ， 他 
们 可 以 自动 地 在 多 个 搜索 引擎 完成 注册 工作 。 软 件 自动 虽然 快捷 ， 但 是 毕竟 不 是 人 工 ， 智 能 化 方 
面 差 了 点 。 

可 以 把 自己 的 网 站 提交 给 各 个 搜索 引擎 ， 这 样 在 各 个 搜索 引擎 就 能 找到 你 的 网 站 了 ， 虽 然 不 
是 每 个 都 能 通过 ， 但 是 勤劳 一 点 总 是 会 有 几 个 通过 的 。 

方法 很 简单 : 首先 在 浏览 器 打开 每 个 网 站 的 登录 口 ， 然 后 把 网 址 输入 进去 就 行 了 。 

百度 搜索 网 站 登录 口 : http:/www.baidu.com/search/url_submit.html 

雅虎 中 国 网 站 登录 口 : http://search.help.cn.yahoo.com/h4_4.html 

网 易 有 道 搜 索引 擎 登录 口 : http://tellbot.youdao.com/report 

英文 雅虎 登录 口 : http://search.yahoo.com/info/submit.html 

TOM 搜索 网 站 登录 口 : http://search.tom.com/tools/weblog/log.php 


20.1.5 搜索 引擎 优化 原则 


SEO 意思 就 是 “搜索 引擎 优化 ”，SEO 的 主要 工作 是 通过 了 解 各 类 搜索 引擎 在 抓 取 页 面 时 的 
不 同 特征 ， 针 对 各 类 搜索 引擎 制定 不 同 的 优化 方针 ， 使 得 所 要 优化 网 站 的 排名 上 升 ， 进 而 达到 提 
升 网 站 流量 乃至 最 终 达 到 提升 网 站 销售 能 力 和 宣传 网 站 的 目的 。 

1. 网 站 架构 优化 

规划 合理 的 站 点 结构 ， 尽 可 能 减 小 目录 深度 ,一 般 目 录 深度 最 好 不 超过 4 层 ， 目 录 深 度 较 小 
的 页 面 不 管 对 于 搜索 引擎 还 是 普通 用 户 都 是 有 好 处 的 ， 因而 能 得 到 更 多 的 权重 。 也 可 以 通过 一 些 
技术 手段 解决 URL 长 度 的 问题 ， 如 URL 重 写 ， 或 者 短 网 址 转换 。 

建立 合理 的 导航 结构 ， 减 少 页 面 间 的 链接 深度 。 只 有 有 具有 清晰 合理 的 网 站 导航 结构 ， 才 能 尽 
可 能 多 地 收录 网 站 的 页 面 和 收录 更 深层 次 的 页 面 。 


2. 网 页 代码 优化 


熟悉 网 页 代码 HTML 的 编写 ， 并且 掌 握 W3C 标准 ， 是 网 站 优化 需要 掌握 的 基础 知识 。 当 然 
如 果 有 网 页 编程 基础 会 更 好 。 
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@ 网 页 布局 采取 DIV+CSS 方式 。 与 传统 的 表格 布局 相 比 ，DIV+CSS 布局 的 网 页 无 论 是 打开 
速度 还 是 网 站 维护 更 改 ， 都 显得 特别 方便 。 

@ 删除 不 规范 URL 字符 或 错误 URL。URL 错误 是 网 站 的 硬 伤 ， 不 规范 URL 不 仅 影 响 搜索 
抓 取 ， 还 会 影响 用 户 体 验 。 如 果 这 方面 的 错误 较 多 的 话 ， 无 论 是 搜索 引擎 ， 还 是 用 户 都 会 
放弃 这 个 网 站 的 。 

@ 削减 或 删除 注解 。 代码 中 的 注解 只 是 为 了 程序 员 方 便 阅读 、 查 错 和 修改 网 站 代码 而 设计 的 
对 于 这 些 代码 ， 只 会 增加 网 页 的 空间 ， 因 此 ， 建 议 削 减 或 者 部 分 删除 。 

@ 减少 JavaScript、Flash 等 特效 ， 因 为 搜索 引擎 不 好 识别 。 

3. 关键 字 优化 

搜索 引擎 是 以 关键 字 为 搜索 条 件 进 行 检索 的 ， 关 键 字 优化 主要 目的 就 是 提高 页 面 和 关键 字 的 

相关 性 。 对 于 SEO 搜索 引擎 优化 来 讲 ， 关 键 字 的 挑选 可 以 从 以 下 的 三 个 方面 进行 。 

@ 根据 自己 的 第 一 感觉 ， 首 先 列 出 自己 认为 比较 合适 的 关键 字 。 

@ ”分析 潜在 的 客户 以 及 合作 伙伴 等 ， 多 向 这 些 人 咨询 ， 参 考 他 们 的 意见 。 

@ 使 用 各 类 优化 工具 进行 关键 字 的 分 析 ， 进 而 选 出 适合 自己 网 站 的 关键 字 。 

4. 站 内 链接 优化 

内 部 链接 在 网 站 的 优化 过 程 中 占据 着 非常 重要 的 位 置 。 内 部 链接 的 建设 可 以 从 以 下 几 个 方面 

入 手 。 

@ 建立 网 站 地 图 。 为 你 的 网 站 建立 一 个 网 站 地 图 , 同时 需要 做 的 是 把 网 站 地 图 放 到 网 站 首页 ， 
使 搜索 引擎 非常 方便 地 就 能 抓 取 所 有 网 页 。 

@ 每 个 页 面 离 首页 最 多 4 次 点 击 。 在 设计 网 站 的 时 候 ， 就 要 确保 从 首页 出 发 到 网 站 任何 一 个 
地 方 都 不 要 大 于 4 次 点 击 ， 如 果 是 小 型 网 站 ， 还 可 以 放 在 根 目 录 ， 离 首页 越 近 越 好 。 

@ 尽 可 能 使 用 文字 导航 。 网 站 的 导航 最 好 是 文字 的 ， 有 利于 被 搜索 引擎 抓 取 。 用 图 片 或 者 脚 
本 语言 来 制作 的 导航 ， 虽 然 看 起 来 漂亮 ， 但 是 这 样 做 不 利于 被 搜索 引擎 抓 取 。 

@ 网 站 导航 中 的 链接 文字 应 该 准确 的 描述 栏目 内 容 , 这 样 自 然而 然 在 链接 文字 中 就 会 有 关键 
字 ， 但 注意 不 要 堆积 关键 字 。 在 网 页 正文 中 提 到 其 他 网 页 内 容 的 时 候 ， 可 以 自然 的 链接 到 
其 他 网 页 。 

@ 网 站 内 部 的 互相 链接 。 在 网 页 正文 中 引用 其 他 文章 时 应 该 用 关键 字 链 接 向 其 他 相关 网 页 ， 
这 样 做 既 有 利于 搜索 引擎 排名 ， 也 有 利于 收录 。 


5. 分 析 与 观察 能 力 

SEO 不 是 照 着 一 次 做 完 就 没事 了 ， 不 断 地 分 析 与 观察 是 绝对 必要 的 。 例 如 ， 持 续 追 踪 锁 定 的 
关键 字 、 分 析 关 键 字 排 名 问题 、 解 决 排名 困境 、 了 解 搜索 引擎 每 次 更 新 的 重点 与 特性 ， 这 些 都 是 
SEO 的 日 常 工 作 。 

6. 了 解 搜索 习惯 


就 拿 关键 字 的 选择 来 说 , 关键 字 的 锁定 与 选择 是 SEO 工作 的 开始 , 也 是 决定 效益 最 重要 的 一 
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步 。 关 键 字 的 锁定 牵涉 到 的 对 象 相当 广泛 ， 从 关键 字 的 难度 、 关 键 字 属性 、 到 搜索 心理 研究 都 有 。 
所 以 了 解 搜索 人 和 群 的 搜索 习惯 和 搜索 心理 是 相当 重要 的 ， 当 然 它 也 是 十 分 复杂 的 。 


7. 不 断 地 创新 


搜索 引擎 在 不 断 地 调整 策略 来 应 对 成 几何 倍数 增长 的 网 页 内 容 ，SEO 的 方法 也 在 不 断 地 调 
整 ， 努 力 尝试 和 创新 各 种 方法 ， 让 搜索 引擎 永远 青睐 你 的 网 站 ， 需 要 有 相当 强 的 创新 意识 。 


20.2 ”导航 网 站 登录 


现在 国内 有 大 量 的 网 址 导航 类 站 点 ， 如 : http://www.hao123.com/、http:/www.265.com/ 等 。 
在 这 些 网 址 导航 类 做 上 链接 , 也 能 带 来 大 量 的 流量 , 不 过 现在 想 登 录 上 像 hao123 这 种 流量 特别 大 
的 站 点 并 不 是 件 容易 事 ， 如 图 20-3 所 示 就 是 导航 网 站 。 


攻 是 wa 症 
GLX 


二 网 到 必 


I xz wm 四 kr | | 
Google 谷 下 | EZ wnswsnn 
ON 国 天 宰相 入 全 捷 下 水 习 避 和 日 村 六 届 jES。 骨 束 车 本 生计 光世 界 该 中 国 东 儿 得 了 | 


军 风 到 号 区 入 两 澡 名称/ 各 间 
[| 网 易 百度 
新 华 网 L 环球 网 早报 网 
渔 宝 用 行 学 尔 街 日 报 45994 游 戏 


天 沽 社区 ' 轩 丽 女性 网 。 7K7K 小 游戏 
委 各 艇 行 网 I 中 美 村 在 绿 56 同 坊 
国美 在 线 当当 六 家 光 宝 商 坟 茜 基 孙女 法 
光宇 竺 到 hy 只 吕 会 特 下 棱 半 优 而 


图 20-3 导航 网 站 
20.3 ”友情 链接 


如 果 网 站 提供 的 是 某 种 服务 ， 而 其 他 网 站 的 内 容 刚 好 和 用 户 形 成 互补 ， 这 时 不 妨 考虑 与 其 建 
立 链接 或 交换 广告 ， 一 来 增加 了 双方 的 访问 量 ， 二 来 可 以 给 客户 提供 更 加 周全 的 服务 ， 同 时 也 避 
免 了 直接 的 竞争 。 网 站 之 间 互 相交 换 链 接 和 旗帜 广告 有 助 于 增加 双方 的 访问 量 ， 如 图 20-4 所 示 就 
是 交换 友情 链接 。 
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图 20-4 交换 友情 链接 


最 理想 的 链接 对 象 是 那些 与 你 的 网 站 流量 相当 的 网 站 。 流 量 太 大 的 网 站 管理 员 由 于 要 应 付 太 
多 要 求 互 换 链接 的 请 求 ， 容 易 将 你 忽略 。 小 一 些 的 网 站 也 可 以 考虑 。 互 换 链 接 页 面 要 放 在 网 站 比 
较 偏 俱 的 地 方 ， 以 免 将 你 的 网 站 访问 者 很 快 引 向 他 人 的 站 点 。 

找到 可 以 互 换 链接 的 网 站 之 后 ， 发 一 封 个 性 化 的 E-mail 给 对 方 网 站 管理 员 ， 如 果 对 方 没有 回 
复 ， 再 打 电 话 试 试 。 

在 进行 交换 链接 过 程 中 往往 存在 一 些 错误 的 做 法 ， 如 不 管 对 方 网 站 的 质量 和 相关 性 ， 片 面 追 
求 链接 数量 ， 这 样 只 能 适得其反 。 有 些 网 站 甚至 通过 大 量 发 送 垃圾 邮件 的 方式 请 求 友情 链接 ， 这 
是 非常 错误 的 做 法 。 


20.4 网 络 广 告 


网 络 广告 就 是 利用 网 站 上 的 广告 横幅 、 文 本 链接 、 多 媒体 的 方法 , 在 互联 网 刊登 或 发 布 广告 ， 
通过 网 络 传递 到 互联 网 用 户 的 一 种 高 科技 广告 运作 方式 。 一 般 形式 是 各 种 图 形 广告 ， 称 为 旗帜 
告 。 网 络 广 告 本 质 上 还 是 属于 传统 宣传 模式 ， 只 不 过 载体 不 同 而 已 。 如 图 20-5 所 示 就 是 在 新 浪 网 
投放 网 络 广告 推广 网 站 。 
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图 20-5 使 用 网 络 广告 推广 网 站 
20.5 ”发 布 信息 推广 


信息 发 布 既是 网 络 营销 的 基本 职能 ， 又 是 一 种 实用 的 操作 手段 。 通 过 互联 网 ， 不 仅 可 以 浏览 
到 大 量 商业 信息 ， 同 时 还 可 以 自己 发 布 信息 。 在 网 上 发 布 信息 可 以 说 是 网 络 营销 最 简单 的 方式 ， 
网 上 有 许多 网 站 提供 企业 供求 信息 发 布 ， 并 且 多 数 为 免费 发 布 信息 ， 有 时 这 种 简单 的 方式 也 会 取 
得 意 想不到 的 效果 。 
分 类 信息 网 站 是 现在 网 站 推广 的 一 个 重要 方式 ， 因 为 它 流量 高 ， 并 且 审 核 宽松 。 下 面 介绍 在 
分 类 信息 网 站 做 推广 的 一 些 事项 。 
@ 在 网 上 找 一 些 分 类 信息 的 网 站 。 这 类 网 站 很 多 ， 但 是 我 们 不 用 太 多 ， 只 找 十 几 、 二 十 个 权 
重 比较 高 的 就 行 了 ， 像 赶集 网 、58 同城 、 百 姓 网 等 。 如 图 20-6 所 示 就 是 在 “58 同城 ”发 
布 信息 。 
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图 20-6 在 “58 同城 ”发 布 信息 
@” 选 对 城市 。 现 在 不 是 纯 互联 网 的 企业 都 有 一 定 的 地 域 性 ， 如 果 你 的 企业 或 者 产品 地 域 性 很 
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强 ， 强 烈 建议 以 地 域 性 推广 为 主 。 大 部 分 分 类 信息 网 都 有 地 区 分 站 。 

@” 选 对 发 布 版 块 。 因 为 分 类 信息 的 类 别 非常 多 ， 在 选择 类 别 的 时 候 一 定 遵循 我 们 自己 的 产品 
和 服务 属性 ， 不 要 发 布 错 了 。 如 你 本 来 是 做 网 站 建设 的 ， 发 到 了 物流 运输 的 类 别 上 了 ， 那 
么 管理 员 会 把 你 的 信息 删除 的 。 

@ 编辑 发 布 内 容 。 内 容 的 编辑 是 重 中 之 重 ， 为 什么 这 样 说 呢 ， 因 为 它 像 软文 一 样 ， 写 原创 的 
最 好 。 不 要 从 其 他 人 那里 拷贝 一 个 相关 信息 过 来 ， 换 个 名 称 就 放 上 去 了 。 与 其 这 样 做 无 用 
功 , 还 不 如 静 下 心 来 好 好 写 一 篇 内 容 ， 不 在 乎 文笔 多 好 ， 自 己 写 的 一 篇 内 容 比 你 复制 十 几 
篇 内 容 的 作用 都 大 。 

@ 信息 的 排版 。 经 验 告 诉 我 们 ， 同 样 的 信息 ， 排 版 混乱 被 删 的 概率 大 很 多 。 

@ 跟踪 效果 。 发 布 的 每 一 条 信息 并 不 是 放 上 去 就 算 完事 了 ， 要 把 每 一 条 发 送 的 URL 地 址 记 
录 下 来 ， 每 星期 查看 带 来 的 效果 如 何 ， 比 如 浏览 量 、 留 言 等 。 只 有 做 好 统计 ， 才 能 根据 反 
馈 的 情况 采取 相应 的 措施 进行 改进 ， 提 高 推广 效果 。 


20.6 ”利用 群 组 消息 即时 推广 


利用 即时 软件 的 群 组 功能 ， 如 QQ 群 、 微 信 群 等 ， 加 入 群 后 发 布 自己 的 网 站 信息 ， 这 种 方式 
即时 为 自己 的 网 站 带 来 流量 。 如 果 同 时 加 几 十 个 QQ 群 ， 推 广 网 站 可 以 达到 非常 不 错 的 效果 ， 但 
这 种 方式 同时 也 被 很 多 人 厌恶 。 如 图 20-7 所 示 利 用 QQ 群 推广 网 站 。 


全 自用 及 记录 
[ 


有 哪 位 毅 要 体验 火 疗 的 ， 区 改革 合作 梯 评 : 太阳 光 域 ， 天 周 交 泪 、 区 办 
抓紧 时 间 找 我 报名 领取 免费 体验 卡 ， RS 
名 额 有 限 ! ! ! 


针对 身体 因 风 、 庵 、 湿 、 势 、 毒 引起 的 酸 、 
| 麻 、 肿 、 联 、 痛 有 立 杆 见 影 的 效果 1 ! 1 


已 A 罩 亚 男 -本 -了 


EE 


图 20-7 利用 QQ 群 推广 网 站 

如 果 加 入 群 后 直接 发 布 广告 ,管理 较 好 的 群 主 马上 将 发 广告 的 人 “ 踢 出 ”但 现在 很 多 站 长 
都 开始 使 用 其 他 的 方式 ， 如 先 与 群 主 搞 好 关系 ， 平 时 积极 参与 聊天 等 活动 ， 在 适当 的 时 候 发 布 自 
己 网 站 的 广告 ， 可 以 起 到 更 好 的 效果 。 

另外 ， 还 有 一 种 现在 很 多 站 点 都 使 用 的 方法 ， 就 是 建立 自己 网 站 的 QQ 群 ， 然 后 在 网 站 上 宣 
传 吸引 网 友 的 加 入 ,这样 一 来 不 仅 能 够 近 距 离 跟 自己 的 网 站 用 户 进行 交流 , 还 能 增加 用 户 的 黏 性 ， 
而 且 网 站 有 什么 新 功能 推出 ， 可 以 即时 在 群 中 发 布 通知 信息 ， 并 且 不 会 有 因为 发 广告 而 被 “ 踢 出 ” 
的 后 顾 之 忧 。 
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前 一 种 通过 添加 QQ 群 宣传 的 方法 会 打扰 到 大 多 数 的 群 员 ， 但 是 又 确实 会 产生 直接 的 效果 ， 
如 果 针 对 的 用 户 群 体 不 符合 ， 则 起 不 到 任何 的 宣传 效果 。 而 后 一 种 方法 更 为 实用 ， 不 仅 能 与 网 站 
的 用 户 进行 交流 ， 而 且 还 能 起 到 宣传 作用 。 


20.7 ”电子 邮件 


电子 邮件 因为 方便 、 快 捷 、 成 本 低廉 的 特点 ， 成 为 目前 使 用 最 广泛 的 互联 网 应 用 ， 是 一 种 有 
效 的 推广 工具 。 它 常用 的 方法 包括 邮件 列表 、 电 子 刊物 、 新 闻 邮 件 、 会 员 通讯 以 及 专业 服务 商 的 
电子 邮件 广告 等 。 


20.7.1 电子 邮件 推广 


电子 邮件 是 目前 使 用 最 广泛 的 互联 网 应 用 。 它 方便 快捷 ， 成 本 低廉 ， 不 失 为 一 种 有 效 的 联络 
[ 具 。 如 图 20-8 所 示 就 是 使 用 电子 邮件 推广 网 站 。 
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送 ) 从 他 15 元 0 马 酒 甩 【 匈 ) 全 国 锡 运 费 
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2005 年 杜 拉 斯 欧 燕 AOC 干 红 葡 菊 酒 
体验 价 : 39 元 市 场 从 : 206; 


图 20-8 使 用 电子 邮件 推广 网 站 


相 比 其 他 网 络 营销 手段 ， 电 子 邮 件 营销 速度 非常 快 。 搜 索引 擎 优化 需要 几 个 月 ， 甚 至 几 年 的 
努力 ， 才 能 充分 发 挥 效 果 。 博 客 营 销 更 是 需要 时 间 ， 以 及 大 量 的 文章 。 而 电子 邮件 营销 只 要 有 邮 
件数 据 库 在 手 ， 发 送 邮 件 后 几 小 时 之 内 就 会 看 到 效果 ， 产 生 订 单 。 网 络 使 商家 可 以 立即 与 成 千 上 
万 潜在 的 和 现 有 的 顾客 取得 联系 。 

由 于 发 送 E-mail 的 成 本 极 低 且 具有 即时 性 ， 因 此 ， 相 对 于 电话 或 邮寄 ， 顾 客 更 愿意 响应 营销 
活动 。 相 关 调 查 报告 显示 ，E-mail 的 点 击 率 比 网 络 横幅 广告 和 旗帜 广告 的 点 击 率 平均 高 约 
5%~15%，E-mail 的 转换 率 比 网 络 横幅 广告 和 旗帜 广告 的 转换 率 平均 高 约 10%~30%。 


20.7.2 ”电子 邮件 推广 的 技巧 


用 户 可 以 看 出 ， 电 子 邮 件 在 现在 的 推广 和 营销 特别 是 电子 商务 类 网 站 的 作用 越 来 越 明显 。 利 
用 好 技巧 ， 让 更 多 的 用 户 产 生 购 买 行为 。 


409 


( x IT 


@ 提高 电子 邮件 的 到 达 率 ， 没 有 到 达 打 开 也 无 从 谈 起 。 提 升 到 达 率 ， 不 断 地 研究 各 种 发 送 邮 
件 方式 ， 从 而 提高 邮件 发 送 的 成 功率 。 

@ 内 容 清 晰 简单 。 电 子 邮 件 内 容 简 洁 ， 用 最 简单 的 内 容 表 达 出 你 的 诉求 点 ， 如 果 必 要 ， 可 以 
给 出 一 个 关于 详细 内 容 的 链接 。 收 件 人 如 果 有 兴趣 ， 会 主动 点 击 你 链接 的 内 容 ， 否 则 ， 内 
容 再 多 也 没有 价值 ， 只 能 引起 收 件 人 的 反感 。 

@ ”根据 不 同 的 用 户 合理 地 安排 邮件 的 主题 。 邮 件 的 主题 是 收 件 人 最 早 可 以 看 到 的 信息 ， 邮 件 
内 容 是 否 能 够 引 人 注 意 ， 主 题 起 到 相当 重要 的 作用 。 邮 件 主题 应 言 简 意 赎 ， 以 便 收 件 人 决 
定 是 否 继续 阅读 邮件 内 容 。 

@ 邮件 的 设计 一 定 要 美观 ， 给 人 眼前 一 亮 的 感 党 。 对 于 两 封 同样 是 陌生 的 邮件 ， 制 用 漂亮 精 
美的 邮件 肯定 比 制 作 粗糙 的 邮件 让 用 户 更 容易 接受 。 因此， 无 论 每 天 在 发 多 少 封 邮件 ， 尽 
量 在 发 之 前 花 点 时 间 美化 一 下 。 这样， 不 但 可 以 提高 公司 的 形象 ， 也 拉 近 了 你 和 用 户 之 间 
的 距离 。 

@ 电子 邮件 发 件 人 与 邮件 地 址 非常 重要 。 电 子 邮 件 收 件 人 收 到 邮件 后 ， 如 果 是 有 印象 的 发 件 
人 名 称 与 发 件 人 地 址 ， 平 均 打开 率 要 比 没有 印象 的 高 出 两 倍 以 上 。 因 此 ， 开 展 电子 邮件 营 
销 必 须 做 到 : 保持 持续 稳定 发 件 人 名 称 ; 使 用 独 有 的 域名 与 发 件 人 地 址 ， 这 样 让 他 们 更 容 
易 接受 我 们 。 

@ ”标题 中 包含 吸引 收 件 人 的 关键 字 。 要 做 到 这 一 点 ， 就 需要 深入 挖 气 分 析 收 件 人 的 关注 点 与 
兴趣 点 ， 结 合 自己 特征 来 把 握 。 

@ 持续 的 反馈 与 改进 。 持 续 地 分 析 那 些 到 达 了 而 没有 打开 的 原因 ， 通 过 一 些 调查 问卷 或 者 访 
问 调 查 ， 对 提高 打开 率 很 有 好 处 。 

@ 转发 与 注册 一 获得 更 多 的 优惠 。 在 我 们 发 布 给 一 个 用 户 的 时 候 ， 提 醒 他 转发 或 者 注册 ， 
并 用 一 定 的 激励 方式 来 鼓励 和 促进 他 实施 这 项 活动 。 

@ 邮件 发 送 的 频率 要 适度 。 有些 公司 有 了 邮件 群发 平台 以 后 ,每 天 就 狂 发 邮件 给 用 户 。 这 样 ， 
不 但 造成 用 户 反感 ， 而 且 邮 件 服务 器 也 会 把 你 列 入 垃圾 邮件 的 名 单 中 。 因 此 ， 我 们 在 发 送 
邮件 的 时 候 ， 一 定 要 用 策略 ， 一 定 要 懂得 分 析 数 据 。 


20.8 问答 式 免费 推广 


在 百度 知道 、 雅 虎 知识 堂 、 搜 搜 问 问 中 回答 与 自己 网 站 内 容 相关 的 问题 ， 然 后 在 问题 中 加 入 
自己 的 网 站 链接 或 公司 地 址 来 推广 ， 如 图 20-9 所 示 。 

一 般 来 说 ， 如 果 只 是 单纯 在 回答 中 写 上 一 个 网 址 ， 这 样 很 难 被 采纳 。 你 可 以 将 自己 的 网 站 地 
址 巧妙 地 融入 回答 中 ， 让 用 户 有 兴趣 打开 网 站 ， 或 者 回答 一 部 分 ， 后 面 提供 自己 的 网 址 。 

你 也 可 以 注册 多 个 用 户 名 ， 自 问 自 答 ， 然 后 将 自己 的 回答 选 为 最 佳 答 案 。 比 如 “什么 网 站 在 
线 看 电影 速度 最 快 ?” 这 样 的 问题 , 而 最 佳 答案 又 是 一 个 电影 网 站 , 通常 都 是 站 长 在 采用 自问 自 答 
的 方式 为 自己 的 网 站 做 免费 推广 。 

如 果 回 答 的 问题 确实 有 价值 , 能 解决 网 友 的 问题 , 那么 这 种 免费 推广 的 方法 持久 性 就 非常 好 ， 
可 以 源源 不 断 地 为 网 站 带 来 流量 。 但 是 如 果 大 量 地 加 广告 ， 轻 则 可 能 造成 问题 被 删除 ， 重 则 会 遭 
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到 搜索 引擎 的 惩罚 。 记 以 使 用 这 种 方法 做 网 站 推广 最 重要 的 是 把 握 好 度 。 
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20.9 在 博客 中 推广 


利用 博客 可 以 宣传 推广 你 的 网 站 、 产 品 、 服 务 ， 只 要 宣传 得 当 ， 可 以 有 效 地 提升 企业 的 知名 
度 ， 无 形 之 中 提升 企业 的 收益 。 如 果 做 得 不 到 位 ， 就 会 对 企业 的 产品 和 服务 就 会 产生 抵触 情绪 ， 
认为 你 的 产品 和 服务 也 是 很 差 ， 对 企业 会 产生 不 好 的 影响 。 所 以 ， 做 博客 营销 ， 一 定 要 强调 把 产 
品 宣传 做 到 “无 形 ” 对 博客 内 容 做 到 精准 ， 具 有 引导 性 ， 做 到 宁 缺 缴 滥 ， 才 能 有 效 地 引导 潜在 客 
户 购买 你 的 产品 和 服务 。 有 具体 方法 如 下 。 

(1) 发 布 一 些 有 趣 、 时 效 性 强 的 博文 ， 吸 引 浏览 者 。 

(2) 在 博客 中 有 自 定义 模板 ， 自 定义 一 个 友情 链接 ， 将 要 推广 的 网 址 加 入 其 中 。 

(3) 维护 好 博客 ， 加 一 些 圈子 和 社区 让 更 多 的 人 知道 你 的 博客 ， 从 而 了 解 到 要 推广 的 目标 。 

(4) 一 个 长 时 间 不 更 新 的 博客 ， 没 有 人 会 喜欢 ， 所 以 要 随时 发 表 新 内 容 ， 哪 伯 只 是 变化 一 个 
图 片 。 简 单 地 说 就 是 : 更 新 ， 更 新 ， 不 停 地 更 新 。 搜 索引 擎 喜欢 新 的 内 容 ， 网 站 经 常 更 新 ， 搜 索 
引擎 便 越 常 造 访 ， 如 此 可 以 让 你 的 博客 经 常 被 列 入 搜索 的 结果 中 。 一 旦 让 搜索 引擎 信赖 不 断 更 新 
的 内 容 ， 就 能 提高 博客 在 搜索 结果 中 的 排名 。 

(5) 网 络 上 ， 获 取信 息 变 得 十 分 容易 ， 所 以 如 果 你 的 博客 能 够 经 常 提供 有 价值 的 信息 ， 将 更 
能 吸引 访客 。 

(6) 如 果 可 以 ， 用 其 他 的 账户 回复 ， 以 提高 博文 的 互动 ， 或 发 布 一 些 互 动 性 比较 强 的 博文 ， 
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调动 访问 者 的 积极 性 。 

(7) 在 一 些 热 门 的 博客 中 ， 用 留言 的 方式 宣传 自己 的 网 站 。 比 如 许多 名 人 博客 的 访问 量 超过 
千 万 次 ， 如 果 每 次 自己 的 留言 都 能 够 抢 到 “沙发 ” 带 来 的 流量 也 相当 大 。 

建立 多 个 博客 的 方法 如 果 运 用 得 当 ， 文 章 优秀 而 被 推荐 到 博客 首页 ， 每 天 为 网 站 带 来 的 流量 
是 相当 可 观 的 。 但 这 很 难 做 到 ， 需 要 花费 大 量 的 精力 ;而 采用 在 他 人 博客 中 留言 的 方式 ， 虽 然 也 
有 效果 ， 但 是 很 容易 被 作为 无 用 评论 或 广告 而 删除 。 

如 图 20-10 所 示 就 是 博客 推广 网 站 。 


| 


和 页“ 区 剧本 和 要 | | 卫 


加 【随手 拉 撤 委 】 图 朋 中 小 全 六 厂 家 的 生存 之 省 ， 你 入 诞 了 要 
Hp: Luewasl envrss 二 网 Ad 


也 可 是 测 入 公司 时 去 过 工厂 古寺 次， 才 亲 
各 几乎 生 有 的 服 交 生 产 注 是 一 人 的 . 

一 印 铺 花 / 由 太一 全 抽 一 束 由 一世 从 一 亿 革 一 
. 主 关 公司 ， 基 至 再 小 到 服 类 作坊 泪 各 部 从 不 儿 


| zope Emo 
em: ot 由 


验 布 之 后 技 订 的 对 比 。 佛 红 们 这 些 中 小 的 绕 刀 ,， 仔 不 和 生 
闪 寺 的 由 及 宕 能 基 床 。 还 是 中 小 全 业 的 教 诛 对 林 了 和 时 闪 槛 求 者 仇杀 才 可 
以 大 大 措 玉 抽出 的 狐 基 ， 栈 少 不 要 的 澳 要， 但 了 在 和 能 已 入 床 巡 作 技 生 人 有 限 太 的 要 


| -estnnaentpm 
ra sen 
crm, 

| ut ,zz 
tam ke 


指摘 布 。 口 人 的 雪 床 对 疆 上 面 这 相 只 又 坟 主 信 面 村 的 入 刷 ， 当 名 之 后 还 机 有 口 
和 英才 二 要 的 和 和 的 工序 下 关 下 多 的 ， 如 平 有 一 各 过 科 隐 车 驼 委 东 ， 只 于 要 肖 玫 


图 20-10 博客 推广 网 站 
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20.10 ”传统 网 下 推广 


在 网 站 的 宣传 推广 中 ， 不 要 太 狭 说 ， 不 要 仅 着 眼 于 各 种 网 络 推广 方式 ， 对 于 传统 的 网 下 推广 
宣传 方式 也 要 很 好 地 加 以 利用 。 


1. 印 名 片 推广 


有 很 多 新 手 也 许 会 认为 ， 网 上 交易 都 是 在 网 上 完成 的 ， 做 名 片 岂 不 是 浪费 成 本 吗 ? 殊不知 ， 
虽然 是 在 网 上 建站 的 ， 但 大 家 还 是 可 以 通过 传统 方式 进行 联系 。 因 此 ， 在 销售 商品 的 时 候 ， 就 可 
以 把 自己 设计 精美 、 个 性 十 足 的 名 片 夹 在 商品 中 ， 说 不 定 就 能 起 到 很 大 的 宣传 作用 。 

在 印刷 了 名 片 之 后 ， 店 主 们 还 可 以 在 日 常生 活 中 ， 在 与 人 交往 时 递送 出 去 ， 随 时 随地 来 宣传 
自己 的 网 站 。 甚 至 可 以 在 同学 通讯 录 里 面 发 出 宣传 和 邀请 ， 在 同学 聚会 时 发 出 自己 的 宣传 名 片 。 
既 可 以 让 同学 朋友 分 享 自己 的 建站 乐趣 ， 又 可 以 为 网 站 增添 人 气 ， 说 不 定 还 可 以 做 成 几 单 生意 ， 
何 乐 而 不 为 呢 ? 如 图 20-11 所 示 就 是 名 片 推广 。 


塞 拉 玛 元 宇 鸡 翻 毛 鸡 
太 和 鸡 八 骏 鸡 绣球 鸡 
云龙 厢 鸡 玲珑 矮 鸡 等 … 


图 20-11 名 片 推广 


2. 媒体 宣传 


当然 ， 媒 体 宣传 这 点 需要 很 大 的 投资 ， 但 其 效果 也 是 可 想 而 知 。 

传统 媒体 广告 方式 不 应 废止 。 但 无 论 是 报纸 还 是 杂志 广告 ， 一 定 确保 在 其 中 展示 你 的 网 址 。 
要 将 查看 网 站 作为 广告 的 辅助 内 容 ， 提 醒 用 户 浏览 网 站 将 获取 更 多 相关 信息 。 别 忽视 在 一 些 定位 
相对 较 窗 的 杂志 或 贸易 期 刊登 广告 ， 有 时 这 些 广告 定位 会 更 加 准确 、 有 效 ， 而 且 比 网 络 广告 更 便 
宜 。 还 有 其 他 传统 方式 可 增加 网 站 访问 量 ， 如 直 邮 、 分 类 广告 、 明 信 片 等 。 电 视 广告 丽 怕 更 适合 
于 那些 销售 大 众 化 商品 的 网 站 。 


3. 搞怪 宣传 
例如 买 几 件 T 恤 ， 在 上 面 印 上 你 的 网 站 Logo， 送 给 身边 的 朋友 和 亲人 。 要 搞 得 漂亮 点 ， 酷 
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点 ， 他 们 就 爱 穿 出 去 为 你 做 宣传 ， 自 己 也 可 以 穿 。 

4. 印 制 传统 广告 

印 制 并 发 放 广 告 也 是 网 站 可 以 采用 的 一 种 推广 方式 。 这 也 是 一 种 很 典型 的 传统 广告 方式 ， 可 
以 大 量 印刷 自己 网 站 的 宣传 单 ， 然 后 亲自 或 者 雇 人 到 各 处 去 分 发 。 看 起 来 这 种 方式 似乎 并 不 太 适 
合 网 站 的 宣传 ， 因 为 它 的 涉及 范围 有 限 ， 针 对 性 太 差 。 

其 实 ， 可 以 走出 这 些 思维 定式 ， 在 传统 广告 宣传 上 走出 一 条 非 传统 的 道路 来 。 可 以 把 自己 网 
站 的 相关 广告 信息 印刷 在 精美 的 日 历 上 、 地 图 上 和 红包 上 ， 或 者 是 精美 的 纪念 品 上 。 当 然 ， 更 可 
以 印 在 商品 包装 上 ， 以 吸引 回头 客 。 

5. 印 塑 料 带 


免费 送 给 快餐 店 、 饭 店 、 农 贸 市 场 。 免 费 的 他 们 巴不得 呢 ， 不 过 这 个 投资 还 是 大 了 点 。 塑 料 
带 上 印 上 网 站 介绍 ， 如 可 以 这 样 写 : 网 站 名 称 : 就 受 打折 。 网 址 : www.xxxx.com， 欢 迎 大 家 观看 。 
关键 字 一 定 要 出 现 ， 即 使 他 们 忘记 了 网 址 也 会 用 百度 去 搜索 的 。 


6. 和 当地 网 吧 合 作 

把 浏览 器 默认 首页 设 为 你 的 网 站 ， 然 后 在 你 的 网 站 上 给 他 们 网 吧 做 广告 。 能 不 能 说 服 网 吧 老 
板 ， 还 得 看 你 的 个 人 能 力 了 。 

7. 赞助 活动 

当然 ， 别 以 为 赞助 就 一 定 要 给 钱 的 ， 你 可 以 先 了 解 一 下 本 地 最 近 搞 什 么 活动 吗 ? 免费 大 力度 
地 为 他 们 宣传 一 下 ， 其 实 是 借 机 炒作 ， 人 们 会 因为 此 事 而 关注 你 的 网 站 。 
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本 章 导 读 


企业 网 站 是 企业 在 互联 网 上 进行 网 络 营销 和 形象 宣传 的 平台 ， 相 当 于 企业 的 网 络 名 片 ， 不 
但 对 企业 的 形象 是 一 个 良好 的 宣传 ， 同 时 也 可 以 辅助 企业 的 销售 。 通 过 网 络 直接 帮助 企业 实现 
产品 的 销售 ， 企 业 可 以 利用 网 站 进行 宣传 、 产 品 资讯 发 布 、 招 聘 等 ， 网 站 制作 应 注重 浏览 者 的 
视觉 体验 、 加 强 客户 服务 、 完 善 网 络 业务 、 吸 引 潜在 客户 关注 。 
网 站 前 期 策划 
网 站 的 版 面 布局 及 色彩 
设计 网 站 首页 
创建 本 地 站 点 
二 级 模板 页 面 的 设计 


实例 展示 


惕 中 天 混 北 北 石 为 因 “中 天 为 和 


网 站 首页 “关于 我 们 _ 产 闻 动 恋 产品 展示 。 化 工 现场 。 机 频 奖 示 。 客户 留言 联 和 我们 


网 站 介绍 页 面 


21.1 网 站 前 期 策划 


对 建立 一 个 成 功 的 网 站 而 言 ， 最 重要 的 是 前 期 策划 ， 而 不 是 技术 。 一 个 成 功 的 策划 者 应 该 考 
虑 多 方面 的 因素 。 


( s IT 


(1) 网 站 建设 要 明确 自己 的 网 站 侧重 点 在 哪里 。 自 身 的 优势 和 劣势 也 必须 提前 做 一 个 评估 。 
而 如 何 通过 网 站 建设 能 放大 优势 ， 补 充 劣势 也 是 网 站 区 别 于 其 他 网 站 的 一 个 重要 考察 点 。 一 个 别 
有 具 风格 而 又 充分 考虑 到 用 户 体验 和 客户 需求 的 网 站 才 是 更 多 受众 所 需求 的 网 站 。 

(2) 网 站 建设 少不了 实地 的 市 场 调查 。 市 场 调 查 包括 向 客户 和 合作 伙伴 汲取 更 加 有 意义 的 资 
料 ， 明 白 客户 最 需要 的 是 什么 ?什么 才 是 合作 伙伴 最 需要 的 ? 这 样 网 站 最 终 呈 现 的 才 有 可 能 是 
喜欢 并 且 接受 的 网 站 ， 也 才能 充分 实现 网 站 所 追求 的 效益 转化 。 

(3) 收集 整理 质量 相对 比较 高 的 内 容 ， 高 质量 的 网 站 内 容 是 吸引 受众 注意 并 且 引 起 关注 的 重 
要 因素 。 所 以 一 定 要 尽 可 能 多 的 收集 和 整理 网 站 需要 的 内 容 和 素材 ， 而 不 是 要 等 网 站 上 线 了 才 去 
慢 慢 地 整理 。 内 容 为 王 是 推广 中 的 一 个 重要 法 宝 ， 对 于 网 站 初期 的 基础 框架 的 搭建 ， 原 创 的 文章 
也 是 非常 必要 的 。 

(4) 明确 自己 的 竞争 优势 。 网 上 、 网 下 竞争 对 手 是 谁 ( 网 上 竞争 对 手 可 以 通过 搜索 引擎 查找 )， 
与 他 们 相 比 ， 公 司 在 商品 、 价 格 、 服 务 、 品 牌 、 配 送 渠 道 等 方面 有 什么 优势 ? 竞争 对 手 的 优势 能 
否 学 习 ? 如 何 根据 自己 的 竞争 优势 来 确定 公司 的 营销 战略 ? 

(5) 如 何 为 客户 提供 信息 ? 网 站 信息 来 源 在 哪里 ? 信息 是 集中 到 网 站 编辑 处 更 新 、 发 布 还 是 
由 各 部 门 自行 更 新 、 发 布 ? 集中 发 布 可 能 安全 性 好 ， 便 于 管理 ， 但 信息 更 新 速度 可 能 较 慢 ， 有 时 
还 可 能 出 现 协调 不 力 的 问题 。 


21.2 ”企业 网 站 的 主要 功能 


一 般 企 业 网 站 主要 有 以 下 功能 。 


@ 公司 概况 : 包括 公司 背景 、 发 展 历史 、 主 要 业绩 、 经 营 理念 、 经 营 目 标 和 组 织 结构 等 ， 让 
用 户 对 公司 的 情况 有 一 个 概括 的 了 解 。 

@ 企业 新 闻 动 态 : 可 以 利用 互联 网 的 信息 传播 优势 ， 构 建 一 个 企业 新 闻 发 布 平台 ， 通 过 建立 
一 个 新 闻 发 布 /管理 系统 ,企业 信息 发 布 与 管理 将 变 得 简单 、 迅 速 ,及 时 向 互联 网 发 布 本 企 
业 的 新 闻 、 公 告 等 信息 。 通 过 公司 动态 可 以 让 用 户 了 解 公司 的 发 展 动向 ， 加 深 对 公司 的 印 
象 ， 从 而 达到 展示 企业 实力 和 形象 的 目的 。 

@ 产品 展示 : 如 果 企 业 提供 多 种 产品 服务 ， 利 用 产品 展示 系统 对 产品 进行 系统 的 管理 ， 包 括 
产品 的 添加 与 删除 、 产 品类 别 的 添加 与 删除 、 特 价 产品 和 最 新 产品 、 推 荐 产品 的 管理 、 产 
品 的 快速 搜索 等 。 可 以 方便 高 效 地 管理 网 上 产品 ， 为 网 上 客户 提供 一 个 全 面 的 产品 展示 平 
台 。 更 重要 的 是 ,网 站 可 以 通过 某 种 方式 建立 与 客户 的 有 效 沟通 , 更 好 地 与 客户 进行 交流 
收集 反馈 信息 ， 从 而 改进 产品 质量 和 提供 服务 水 平 。 

@ 产品 搜索 : 如 果 公 司 产品 比较 多 ， 无 法 在 简单 的 目录 中 全 部 列 出 ， 而 且 经 常 有 产品 升级 换 
代 。 为 了 让 用 户 能 够 方便 地 找到 所 需要 的 产品 ， 除 了 设计 详细 的 分 级 目录 之 外 ， 增 加 关键 
字 搜 索 功 能 不 失 为 有 效 的 措施 。 

@ 网 上 招聘 : 这 也 是 网 络 应 用 的 一 个 重要 方面 ， 网 上 招聘 系统 可 以 根据 企业 自身 特点 ， 建 立 
一 个 企业 网 络 人 才 库 。 人 才 库 对 外 可 以 进行 在 线 网 络 即时 招聘 ， 对 内 可 以 方便 管理 人 员 对 
招聘 信息 和 应 聘 人 员 的 管理 ， 同 时 人 才 库 可 以 为 企业 储备 人 才 ， 为 日 后 需要 时 使 用 。 
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@ 销售 网 络 : 目前 用 户 直接 在 网 站 订货 的 并 不 多 ,但 网 上 看 货 网 下 购买 的 现象 比较 普遍 ， 尤 
其 是 价格 比较 贵重 或 销售 渠道 比较 少 的 商品 ， 用 户 通 常 喜欢 通过 网 络 获取 足够 信息 后 在 本 
地 的 实体 商场 购买 。 因 此 ， 尽 可 能 详尽 地 告诉 用 户 在 什么 地 方 可 以 买 到 他 所 需要 的 产品 。 

@ 售后 服务 : 有 关 质 量 保证 条 款 、 售 后 服务 措施 以 及 各 地 售后 服务 的 联系 方式 等 都 是 用 户 比 
较 关心 的 信息 , 而 且 是 否 可 以 在 本 地 获得 售后 服务 , 往往 是 影响 用 户 购买 决策 的 重要 因素 ， 
对 于 这 些 信息 应 该 尽 可 能 详细 地 提供 。 

@ 技术 支持 : 这 一 点 对 于 生产 或 销售 高 科技 产品 的 公司 尤为 重要 ， 网 站 上 除了 产品 说 明 书 之 
外 ,企业 还 应 该 将 用 户 关心 的 技术 问题 及 其 答案 公布 在 网 上 ， 如 一 些 常见 故障 处 理 、 产 品 
的 驱动 程序 、 软 件 工具 的 版 本 等 信息 资料 ， 可 以 用 在 线 提问 或 常见 问题 回答 的 方式 体现 。 

@ 联系 信息 : 网 站 上 应 该 提供 足够 详细 的 联系 信息 ， 除 了 公司 的 地 址 、 电 话 、 传 真 、 邮 政 编 
码 、E-mail 地 址 等 基本 信息 之 外 ， 最 好 能 详细 地 列 出 客户 或 者 业务 伙伴 可 能 需要 联系 的 具 
体 部 门 的 联系 方式 。 对 于 有 分 支 机 构 的 企业 ， 同 时 还 应 当 有 各 地 分 支 机 构 的 联系 方式 ， 在 
为 用 户 提供 方便 的 同时 ， 也 起 到 了 对 各 地 业务 的 支持 作用 。 

@ 辅助 信息 : 有 时 由 于 企业 产品 比较 少 ， 网 页 内 容 显 得 有 些 单调 ， 可 以 通过 增加 一 些 辅助 信 
息 来 弥补 这 种 不 足 。 辅 助 信息 的 内 容 比较 广泛 ， 可 以 是 本 公司 、 合 作 伙伴 、 经 销 商 或 用 户 
的 一 些 相关 新 闻 、 趣 事 或 产品 保养 /维修 常识 等 。 


21.3 ”设计 网 站 首页 


对 于 所 有 网 站 来 说 重 中 之 重 的 页 面 就 是 首页 了 ， 能 够 做 好 首页 就 相当 于 做 好 网 站 的 一 半 了 。 
本 节 讲述 设计 网 站 首页 ， 如 图 21-1 所 示 ， 具 体操 作 步 骤 如 下 。 
步 又 014 启动 Photoshop CC， 执 行 “文件 ”|“ 新 建 ”命令 ， 弹 出 “新 建 ” 对 话 框 ， 将 “ 宽 ” 设 
置 为 960，“ 高 ”设置 为 950， 如 图 21-2 所 示 。 
总 中 天 温 北 2 


网 站 首页 关于 我 们 


凝 石 为 因 “中 天 为 疆 


新 闻 动态 。 产品 虹 示 。 获 工 现场 。 视频 演示 。 客户 乱 言 ”联系 我 们 


名 称 (N): 未 标题 -1 
和 (p): | 自 定 


存 侍 预 设 (S)… 


宽度 (W): | 960 卫队 预 设 (D) 
高 度 (H): | 950 


分 辩 训 R): [72 
黄色 枉 式 (M): | RGB 新 色 
背景 内 容 [C): | 白色 


河 襄 级 


图 21-1 网 站 首页 效果 图 21-2 “新建” 对话 框 
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步 又 024 单 击 “ 确 定 ”按钮 ， 新 建 空 白文 档 ， 如 图 21-3 所 示 。 


图 21-3 新 建 空白 文档 


步骤 034 选择 工具 箱 中 的 “和 矩形” 工具， 在 选项 栏 中 将 填充 颜色 设置 为 3 名 全 ， 在 窗口 中 绘制 失 
形 ， 如 图 21-4 所 示 。 


图 21-4 绘制 矩形 
步 最 044 选择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 选项 栏 中 单 击 “ 形 状 ” 按 钮 ， 在 弹出 的 列表 


中 选择 合适 的 形状 ， 在 窗口 中 按 住 鼠 标 左 键 给 


WR am 


制 形状 ， 如 图 21-5 所 示 。 


图 21-5 绘制 形状 
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步骤 054 执行 “图 层 ”|“ 图 层 样式 ”|“ 渐 变 释 加 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 设 置 渐变 
颜色 从 蓝 色 到 天 蓝 色 ， 如 图 21-6 所 示 。 
步骤 064 勾 选 “投影 ” 复 选 框 ， 设 置 投影 参数 ， 如 图 21-7 所 示 。 


3 1 可 1] 确 旺 

C3 天 了 
和 下 SW 
mE(V) | 机 mV) 


EE 
RE | 丙 看 


图 21-6 “图 层 样 式 ” 对 话 框 图 21-7 设置 投影 参数 
步骤 074M 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 效果 ， 如 图 21-8 所 示 。 


图 21-8 设置 图 层 样式 


步骤 08 选择 工具 箱 中 的 “ 横 排 文 字 ” 工 具 ， 矩 形 的 右边 输入 相应 的 文本 ， 并 设置 文本 的 大 小 
和 字体 样式 ， 如 图 21-9 所 示 。 

步骤 094 选择 工具 箱 中 的 “ 圆 角 矩形 ”工具 ， 在 选项 栏 中 将 描 边 颜色 设置 为 浅 灰 色 ， 大 小 设置 
为 1， 在 窗口 中 绘制 圆 角 和 矩形 ， 如 图 21-10 所 示 。 

步骤 104 单 击 选项 栏 中 的 “填充 ”工具 ， 在 弹出 的 列表 框 中 单 击 “ 渐 变 ”按钮 ， 设 置 渐变 颜色 ， 
如 图 21-11 所 示 。 
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2 吕 ) 中 天 混 北 凝 石 为 因 ” 中 天 为 强 


图 21-9 输入 文字 


上 一 医生 
国友 图 


凝 石 为 因 ” 中 天 为 疆 


图 21-10 绘制 圆 角 和 矩形 图 21-11 设置 渐变 颜色 
步骤 114 设置 填充 渐变 颜色 的 效果 如 图 21-12 所 示 。 


A 中 天 混 凝 凝 石 为 因 ” 中 天 为 强 


图 21-12 填充 渐变 颜色 


步 又 124 选择 工具 箱 中 的 “直线 ”工具 ,在 圆 角 和 矩形 上 面 绘 制 7 个 灰色 的 直线 , 如 图 21-13 所 示 。 
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图 21-13 绘制 直线 


步骤 134 选择 工具 箱 中 的 “ 模 排 文字 ”工具 ， 在 选项 栏 中 设置 字体 样式 和 字体 颜色 ， 在 圆 角 按 
钮 上 面 输入 导航 文字 ， 如 图 21-14 所 示 。 


是 中 天 混 凝 凝 石 为 因 ”中 天 为 对 


站 网 站 首页 关于 我 们 新闻 动态 。 产品 展示 ， 施工 现场 视频 次 示 。 客户 留言 。 联 系 我 们 


图 21-14 输入 导航 文字 

步骤 144 执行 “文件 ”|“ 置 入 ”命令 ， 弹 出 “ 置 入 ”对 话 框 ， 选 择 要 导入 的 图 像 文件 index.jpg， 
如 图 21-15 所 示 。 

步骤 154 单 击 “ 置 入 ”按钮 ， 置 入 图 像 文件 ， 如 图 21-16 所 示 。 


人 中 天 混 凝 凝 石 为 因 “中 天 为 


网 站 首页 关于 我 们 新 闻 动态 产品 舟 示 。 拖 工 现场 视频 演示 。 富 户 留言 ”联系 我 们 


图 21-15 “ 置 入 ”对 话 框 图 21-16 置 入 图 像 文件 
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步骤 16M 选择 工具 箱 中 的 “ 圆 角 和 矩形 ”工具 ， 在 选项 栏 中 将 填充 颜色 设置 为 黑色 ， 在 窗口 中 绘 
制 圆 角 和 矩形， 如 图 21-17 所 示 。 


站 中 天 混 北 癌 石 为 因 “ 中 天 为 一 


网 站 首页 关于 我 们 新 闻 动 态 ”产品 展示 施工 现场 视频 演示 。 客户 留言 ”联系 我 们 


图 21-17 绘制 圆 角 拢 形 


步 野 174 选择 工具 箱 中 的 “ 横 排 文 字 ” 工 具 ， 在 圆 角 按 钮 上 输入 “新 闻 动 态 ”， 在 右 下 角 输 入 
more， 如 图 21-18 所 示 。 


; 区 中 天 混 凝 北 石 为 因 “ 中 天 为 


网 引伸 页 关于 我 们 新闻 动态 。 产品 展示 施工 现场 。 搞 频 六 示 。 看 户 留言 联系 我 们 


图 21-18 输入 文字 


步骤 184 选择 工具 箱 中 的 “ 圆 角 矩形 ”工具 ， 在 选项 栏 中 设置 填充 颜色 和 笔触 颜色 ， 在 窗口 中 
绘制 圆 角 矩形 ， 如 图 21-19 所 示 。 


图 21-19 绘制 圆 角 矩形 
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步骤 19 选择 工具 箱 中 的 “直线 ”工具 ， 在 窗口 中 绘制 4 条 直线 ， 如 图 21-20 所 示 。 


加 


图 21-20 绘制 直线 
步 又 20 4 选择 工具 箱 中 的 “ 横 排 文 字 ” 工 具 ， 在 窗口 中 输入 新 闻 动 态 文字 ， 如 图 21-21 所 示 。 


图 21-21 输入 文字 


步骤 214 选择 工具 箱 中 的 “ 圆 角 和 矩形” 工具， 在 窗口 中 绘制 圆 角 和 矩形， 在 圆 角 算 形 上 面 输入 文 
字 “ 公 司 新 闻 ” 和 more， 如 图 21-22 所 示 。 


图 21-22 输入 文字 
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步骤 224 执行 “文件 ”|“ 置 入 ”命令 ,弹出 “ 置 入 ”对 话 框 ， 选 择 要 置 入 的 图 像 文件 ， 单 击 “ 置 
入 ”按钮 ， 置 入 图 像 文件 ， 如 图 21-23 所 示 。 


图 21-23 置 入 图 像 文件 
步骤 234 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 窗口 中 输入 公司 新 闻 文本 ， 如 图 21-24 所 示 。 


图 21-24 输入 文字 
步骤 244 执行 “文件 ”|“ 置 入 ”命令 ， 置 入 3 幅 图 像 文件 ， 如 图 21-25 所 示 。 


图 21-25 置 入 图 像 文 件 
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步骤 254 选择 工具 箱 中 的 “ 圆 角 和 矩形” 工具， 在 窗口 中 绘制 一 个 大 的 浅 灰 色 圆 角 矩形 ， 再 绘制 
一 个 小 的 深 灰色 的 图 角 和 矩形 ， 如 图 21-26 所 示 。 


图 21-26 绘制 圆 角 和 矩形 


步骤 264 选择 工具 箱 中 的 “ 圆 角 和 矩形 ”工具 ， 在 深 砍 色 的 圆 角 和 矩形 上 面 输入 “产品 展示 
PRODUCT”， 如 图 21-27 所 示 。 


图 21-27 输入 文字 


步 最 274 选择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 选项 栏 中 单 击 形状 按钮 ， 在 弹出 的 列表 框 中 
选择 形状 “箭头 2”， 在 窗口 中 绘制 2 个 箭头 形状 ， 如 图 21-28 所 示 。 


Ep 


图 21-28 绘制 形状 
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步骤 284 执行 “文件 ”|“ 置 入 ”命令 ， 置 入 几 幅 产品 图 像 ， 如 图 21-29 所 示 。 


rR 


产品 展示 neon 


图 21-29 置 入 产品 图 像 
步骤 29 选择 工具 箱 中 的 “和 矩形” 工具， 在 窗口 中 绘制 灰色 矩形 ， 如 图 21-30 所 示 。 


图 21-30 绘制 矩形 
步骤 304 选择 工具 箱 中 的 “ 横 排 文字 ”工具 ， 在 矩形 上 面 输入 相应 的 文字 ， 如 图 21-31 所 示 。 


21-31 输入 文字 
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过 1 .4 创建 本 地 站 点 


Dreamweaver 是 最 佳 的 站 点 创建 和 管理 工具 ， 使 用 它 不 仅 可 以 创建 单独 的 文档 ， 还 可 以 创建 
完整 的 站 点 。 创 建 本 地 站 点 的 具体 操作 步骤 如 下 。 


步骤 01 丰 启动 Dreamweaver CC， 执 行 “站 点 ”| “新建 站点” 命令， 如 图 21-32 所 示 。 
步骤 024 弹出 “站 点 设置 对 象 ”对 话 框 ， 在 对 话 框 中 单 击 “ 本 地 站 点 文件 夹 ”后 面 的 “浏览 文 
件 夹 ”按钮 ， 如 图 21-33 所 示 。 


TW WP 
新 建 Business calidyst 站 点 (B)… 
管理 站 点 (M)… 
Cad+Shift+D 
和 Cs Dreamweaver 站 点 是 网 站 中 从 用 的 也 有 六 件 和 光源 的 名，Dreamweeyer 
Ctrl+Shift+U 


Ei 


Crrl+Alt+Shit+U 


旋 可 以 在 此 站 为 Preemwenve 站 点 选择 本 地 文件 去 各 名 秆 。 
二 Eee 
天 地 站 点 广 件 夫 [C UseYWcovoDoomevb 丰 WE |] 曾 


同步 站点 范围 (Z) 

检查 站 点 范围 的 链接 (W) Ctrl+F8 
改变 站 点 范围 的 链接 (WO… 

高 级 (A) 上 


21-32 “新 建站 点 ”命令 图 21-33 “站 点 设置 对 象 ”对 话 框 


步 双 034 弹出 “选择 跟 文件 夹 ”对 话 框 ， 选 择 要 创建 站 点 的 文件 夹 位 置 ， 如 图 21-34 所 示 。 
步骤 044 单 击 “ 选 择 文件 夹 ”按钮 在 “本 地 站 点 文件 夹 ” 中 添加 本 地 文件 夹 位 置 ， 将 “站 点 
名 称 ” 设 置 为 22， 如 图 21-35 所 示 。 


ee pe 
| 
将 柯 愉 在 此 站 方 Dremwesver 四 占 造反 本 地 久 牢记 和 名 称 。 
站 号 儿科 
本 光 没 各 名 件 去 : [了 网 让 填 到 全 出 朋 邱 导 衬 二 呈 坟 诗 2 


21-34 “选择 跟 文件 夹 ” 对 话 框 图 21-35 选择 站 点 
步骤 054 单 击 “ 保 存 ” 按 钮 ， 新 建站 点 22， 如 图 21-36 所 示 。 
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EE 和 而 v| 
多 G5 人 H3 名 8| 癌 


需 网 站 首页 psd 2.... hdobe ... 


R 


二 ”2015/4/28 11:06 天 [碧玉 


图 21-36 新 建站 点 


21.5 ”二 级 模板 页 面 的 设计 


在 Dreamweaver 中 ,模板 是 一 种 特殊 的 文档 ， 模 板 一 般 保存 在 本 地 站 点 根 文件 夹 中 一 个 特殊 
的 Templates 文件 夹 内 。 


21.5.1 创建 库 文件 


库 是 一 种 经 常 重复 使 用 或 更 新 的 页 面 元 素 ， 这 些 元 素 称 为 库 项 目 ， 可 以 在 库 中 储存 各 种 各 样 
的 页 面 元 素 。 每 当 更 改 某 个 库 项 目的 内 容 时 ， 可 以 相应 的 更 新 所 有 使 用 该 项 目的 页 面 。 具 体操 作 
步骤 如 下 。 


步 又 014 执行 “文件 |“ 新建 ”命令 ， 弹 出 “新 建文 件 ”对 话 框 ， 如 图 21-37 所 示 。 
步骤 024 单 击 “ 确 定 ”按钮 ， 新 建 空白 文档 。 执 行 “插入 ”|“ 表 格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 
将 “ 行 数 ” 设 置 为 3，“ 列 ”设置 为 1，“ 表 格 宽度 ”设置 为 600， 如 图 21-38 所 示 。 


各 

雪 格 二 度 - 960 | | 像素 
边框 想 给 -|0| 。 | 像素 
单元 格 边 距 国 
间 元 格 间 上 田 


EE CE 


图 21-37 “新 建文 档 ” 对 话 框 21-38 “表格 ”对 话 框 
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步 枝 034 单 击 “确定 ”按钮 ， 插 入 3 行 1 列 的 表格 ， 在 “属性 ”面板 中 将 Align 设置 为 “居中 对 
齐 ”， 如 图 21-39 所 示 。 

步骤 04 将 光标 置 于 第 1 行 单 元 格 中 ， 执 行 “ 插 入 ”|“ 图 像 ”| “图像 ”命令 ， 弹 出 “选择 图 像 
源 文件 ”对 话 框 ， 选 择 要 插入 的 图 像 文 件 ， 如 图 21-40 所 示 。 


图 21-39 插入 表格 图 21-40 “选择 图 像 源 文件 ”对 话 框 
步骤 054 单 击 “ 确 定 ” 按 钮 ， 插 入 图 像 文件 ， 如 图 21-41 所 示 。 


图 21-41 插入 图 像 文件 
步 野 064 重复 步骤 3~5， 在 第 2、3 行 单元 格 中 插入 相应 的 图 像 文件 ， 如 图 21-42 所 示 。 
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网 站 首页 关于 我 们 新 闻 动态 。 产品 展示 施工 沈 场 视频 演示 ”客户 留言 。 联系 我 们 


21-42 ”插入 图 像 文件 
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步骤 07A 在 执行 “文件 ”| “另存 为 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 将 “名 称 ” 设 置 为 ttp，“ 保 
存 类 型 ”设置 为 lbi， 如 图 21-43 所 示 。 
步 又 08 4 单 击 “ 保 存 ”按钮 ， 即 可 将 文件 保存 为 库 文件 ， 如 图 21-44 所 示 。 
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图 21-43 “另存 为 ”对 话 框 图 21-44 保存 为 库 文件 
21.5.2 ”创建 模板 


本 节 讲 述 模板 的 创建 ， 具 体操 作 步 又 如 下 。 
步骤 014 执行 “文件 ”| “新建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 选择“ 空白 页 ”| “HTML 模 
板 ”|“ 无 ”选项 ， 如 图 21-45 所 示 。 
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图 21-45 “新 建文 档 ” 对 话 框 
步骤 02 单 击 “创建 ”按钮 ， 新 建 空白 文档 ， 如 图 21-46 所 示 。 
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图 21-46 ”新建 空白 文档 
步 又 034 执行 “文件 ”| “另存 为 ”命令 ， 弹 出 Dreamweaver 提示 框 ， 如 图 21-47 所 示 。 
步 野 044 单 击 “ 确 定 ”按钮 ， 弹 出 “另存 模板 ”对 话 框 ， 将 “另存 为 ”名 称 设置 为 moban， 如 
图 21-48 所 示 。 


站 点 ; 22 yj | 


现存 的 模板 : | ( 肌 有 模板 ) | 
全 此 模板 不 含有 任何 可 编辑 区 域 。 您 想 继续 吧 ? 
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图 21-47 Dreamweaver 提示 框 图 21-48 “另存 模板 ”对 话 框 
步骤 054 单 击 “保存 ”按钮 ， 保 存 文档 ， 如 图 21-49 所 示 。 
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21-49 ”保存 文档 
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步 枝 064 执行 “插入 ”|“ 表 格 ”命令 ， 插 入 1 行 1 列 的 表格 ， 在 “属性 ”面板 中 将 对 其 设置 为 
“居中 对 齐 ”， 如 图 21-50 所 示 。 

步 又 07 4 执行 “窗口 ”| “资源 ”命令 ， 打 开 “ 资 源 ” 面 板 ， 单 击 左下 角 的 库 本 按钮， 即 可 看 见 
上 节 创建 的 库 文件 ， 如 图 21-51 所 示 。 
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[CE CG 有 
图 21-50 插入 表格 图 21-51 “资源 ”面板 


步 野 08 4 将 光标 移 置 表格 中 ， 单 击 底部 的 “插入 ”按钮 , 即 可 将 库 文件 插入 到 表格 中 ,如 图 21-52 
所 示 。 


网 站 首页 关于 我 们 新 闻 动态 产品 展示 。 施工 现场 


图 21-52 插入 库 文件 


步骤 09 将 光标 置 于 库 文件 的 右边 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 , 插入 1 行 2 列 的 表格 , 在 “ 属 
性 ”面板 中 将 对 其 设置 为 居中 对 齐 ， 如 图 21-53 所 示 。 
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图 21-53 插入 表格 


步骤 104 将 光标 置 于 插入 表格 的 第 1 列 单元 格 中 ， 执 行 “ 插 入 ”| “表格 ”命令 ,插入 8 行 1 列 
的 表格 ， 如 图 21-54 所 示 。 
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21-54 插入 表格 


步骤 114 将 光标 置 于 第 1 行 单元 格 中 ， 打 开 “ 拆 分 ”视图 ， 在 td 表格 中 输入 代码 : height="50" 
background=file:///D|/ 网 站 建设 全 攻略 目录 /效果 /最 终 效果 /22/images/index_21.jpg， 设 置 
表格 的 背景 图 像 ， 将 高 度 设置 为 50， 如 图 21-55 所 示 。 
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图 21-55 设置 背景 图 像 


步 又 124 打开 “设计 ”视图 ， 输 入 文字 “关于 我 们 ”， 在 “属性 ”面板 中 将 字体 大 小 设置 为 30px， 
如 图 21-56 所 示 。 
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图 21-56 输入 文字 
步骤 13 4 打开 “ 拆 分 ”视图 ， 在 下 面 的 7 行 单元 格 中 输入 代码 用 来 设置 背景 颜色 ， 如 图 21-57 所 示 。 
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21-57 设置 背景 颜色 
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步骤 144 在 这 7 行 单元 格 中 输入 导航 文本 ， 如 图 21-58 所 示 。 


图 21-58 输入 导航 文本 
步骤 154 将 光标 置 于 表格 的 右边 ， 插 入 3 行 1 列 的 表格 ， 如 图 21-59 所 示 。 
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21-59 ”插入 表格 


步骤 16 人 在 光标 置 于 第 1 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 图 像 ”| “图像” 命令 ， 弹 出 “选择 图 像 
源 文件 ”对 话 框 ， 选 择 要 插入 的 图 像 文件 index_06_7226， 如 图 21-60 所 示 。 
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图 21-60 “选择 图 像 源 文件 ”对 话 框 
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步 野 17 4 单 击 “确定 ”按钮 ， 插 入 图 像 文 件 ， 如 图 21-61 所 示 。 
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图 21-62 插入 图 像 
步骤 19 将 光标 置 于 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 可 编辑 区 域 ”命令 ， 弹 出 “新 建 可 编辑 
区 ”对 话 框 ， 如 图 21-63 所 示 。 
步 又 20 4 单 击 “ 确 定 ” 按 钮 ， 创 建 可 编辑 区 ， 如 图 21-64 所 示 。 


名 称 : 


此 区 域 将 可 以 在 基于 该 模板 的 文档 
中 进行 编辑 。 


21-63 加深 效果 


436 


第 21 章 设计 企业 宣传 展示 型 网 站 


步骤 21 将 光标 置 于 表格 的 右边 ， 插 入 1 行 1 列 的 表格 ， 如 图 21-65 所 示 。 
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图 21-65 插入 表格 


步 野 224 将 光标 置 于 表格 中 ,在 “属性 ”面板 中 将 背景 颜色 设置 为 #CCCCCC，“ 高 ” 设置 为 80， 
如 图 21-66 所 示 。 
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图 21-66 设置 背景 颜色 
步 最 234 在 底部 的 单元 格 中 输入 文本 ， 如 图 21-67 所 示 。 
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图 21-67 输入 文本 
21.5.3 ”利用 模板 创建 二 级 页 面 


创建 了 模板 以 后 ， 就 可 以 应 用 模板 快速 、 高 效 地 设计 出 风格 一 致 的 网 页 。 使 用 模板 创建 网 页 
效果 如 图 21-68 所 示 ， 具 体操 作 步 又 如 下 。 
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图 21-68 ”网 站 介绍 页 面 
最 终 文件 : 最终 文 件 /22/jieshao.html 


步骤 O01 人 启动 Dreamweaver CC 软件 ， 执 行 “ 文 件 ”|“ 新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 
选择 “网 站 模板 ”| 22 | moban 选项 ， 如 图 21-69 所 示 。 
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图 21-69 “新 建文 档 ” 对 话 框 
步骤 024 单 击 “ 创 建 ”按钮 ， 新 建 模板 网 页 ， 如 图 21-70 所 示 。 
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图 21-70 ”新建 模板 网 页 


步骤 034 将 光标 置 于 可 编辑 区 中 , 删除 原来 的 文字 , 插入 一 个 2 行 1 列 的 表格 , 如 图 21-71 所 示 。 
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21-71 插入 表格 
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步 枝 044 将 光标 置 于 第 1 行 单元 格 中 ， 打 开 “ 拆 分 ”视图 ， 输 入 代码 设置 表格 背景 颜色 ， 如 图 
21-72 所 示 。 
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图 21-72 设置 背景 颜色 


步骤 05 将 光标 置 于 背景 图 像 上 ， 输 入 文本 在 “属性 ”面板 中 设置 其 字体 大 小 和 字体 颜色 ， 如 
图 21-73 所 示 。 
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图 21-73 输入 文本 
步 又 064 将 光标 置 于 第 2 行 单元 格 中 ， 输 入 相应 的 企业 介绍 文本 ， 如 图 21-74 所 示 。 
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图 21-74 输入 文本 


步 台 07 将 光标 置 于 文本 介绍 中 ， 执 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ” 命令， 弹出 “选择 图 像 源 文 
件 ” 对 话 框 ， 选 择 要 插入 的 图 像 文件 ， 如 图 21-75 所 示 。 


BI [git*jpg" jpeg.p » 
ms 


图 21-75 “选择 图 像 源 文件 ”对 话 框 
步骤 08 4 单 击 “ 确 定 ”按钮 ， 插 入 图 像 文件 ， 如 图 21-76 所 示 。 


21-76 插入 图 像 文件 
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步骤 094 打开 “ 拆 分 ”视图 ， 输 入 代码 : hspace="10" vspace="10" align="right"， 用 于 设置 图 像 
文件 左右 边 距 为 10， 对 其 设置 为 右 对 齐 ， 如 图 21-77 所 示 。 
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图 21-77 设置 图 像 右 对 齐 
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